Displaying all page numbers can distort your page if there are too many of them. You can prevent this by applying a horizontal scrolling effect to the pager. By applying a scroll effect you can tack away page numbers that don't fit the page and access them by scrolling.
The code below shows how to do this by applying CSS to a DIV element containing the page numbers
Scrollable pagination demo
Scroll to the right to view the remaining page numbers.
Code for creating a scrollable paginator
01:
02: <style>
03:
04: div.y-scroll {
05:
06: width: 20%;
07:
08: overflow-x: auto;
09:
10: white-space: nowrap;
11:
12: }
13:
14: div.y-scroll > ul {
15:
16: list-style-type: none;
17:
18: }
19:
20: div.y-scroll > ul > li {
21:
22: display: inline-block;
23:
24: margin-right: 2%;
25:
26: border-color: #808380;
27:
28: border-style: double;
29:
30: padding: 2%;
31:
32: }
33:
34: div.y-scroll > ul > li > a {
35:
36: color: #fff;
37:
38: }
39:
40: </style>
41:
42: <div class="y-scroll">
43:
44: <ul>
45:
46: <li><a href="#">></a></li>
47:
48: <li><a href="#">1</a></li>
49:
50: <li><a href="#">2</a></li>
51:
52: <li><a href="#">3</a></li>
53:
54: <li><a href="#">4</a></li>
55:
56: <li><a href="#">5</a></li>
57:
58: <li><a href="#">6</a></li>
59:
60: <li><a href="#">7</a></li>
61:
62: <li><a href="#">8</a></li>
63:
64: <li><a href="#">9</a></li>
65:
66: <li><a href="#">10</a></li>
67:
68: <li><a href="#">></a></li>
69:
70: </ul>
71:
72: </div>
73: The div.y-scroll {} CSS block is responsible for creating the scrolling effect. The width specified is used to guard the number of page numbers that are displayed at a time.
The overflow-x property ensures that the undisplayed page numbers stay hidden, and with white-space set to wrap this ensures the hidden page numbers are not moved to the next line. This forces everything to stay hidden and only shown by scrolling.