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.
Here is another article you might like 😊 Highlight.js: Add line numbers