1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>CSS世界--代码实践--最大宽度,iScroll平滑滚动</title>
9 <style>
10 .wrap {
11 width: 300px;
12 height: 200px;
13 position: relative;
14 overflow: hidden;
15 background: pink;
16 }
17
18 .wrap>ul {
19 position: absolute;
20 white-space: nowrap;
21 }
22
23 .wrap li {
24 display: inline-block;
25 }
26
27 ul,
28 li {
29 margin: 0;
30 padding: 0;
31 }
32
33 </style>
34 </head>
35
36 <body>
37 <div id="wrap" class="wrap">
38 <ul>
39 <li>
40 <div style="width: 200px;height: 100px;background: cadetblue;">1AAA</div>
41 </li>
42 <li>
43 <div style="width: 200px;height: 100px;background: cadetblue;">2AAA</div>
44 </li>
45 <li>
46 <div style="width: 200px;height: 100px;background: cadetblue;">3AAA</div>
47 </li>
48 <li>
49 <div style="width: 200px;height: 100px;background: cadetblue;">4AAA</div>
50 </li>
51 <li>
52 <div style="width: 200px;height: 100px;background: cadetblue;">5AAA</div>
53 </li>
54 </ul>
55 </div>
56 </body>
57 <script src="https://blog-static.cnblogs.com/files/zyt6/iScroll.js"></script>
58 <script>
59 new IScroll('#wrap', {
60 scrollbars: true,
61 scrollX: true,
62 scrollY: false
63 });
64 </script>
65
66 </html>
