https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>页面横向滚动</title> <style type="text/css"> body{margin: 0;padding: 0;} ul{white-space: nowrap;width: 100%;height: 100vh;overflow-x: auto;margin: 0;padding: 0;} li{display: inline-block;} </style> </head> <body> <ul> <li><img src="http://img2.xcabc.com/201710/26/20171026104527306921.png" ></li> <li><img src="http://img2.xcabc.com/201710/26/20171026104527306921.png" ></li> <li><img src="http://img2.xcabc.com/201710/26/20171026104527306921.png" ></li> <li><img src="http://img2.xcabc.com/201710/26/20171026104527306921.png" ></li> <li><img src="http://img2.xcabc.com/201710/26/20171026104527306921.png" ></li> <li><img src="http://img2.xcabc.com/201710/26/20171026104527306921.png" ></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $('ul').mousewheel(function(e, delta) { console.log(delta); this.scrollLeft -= (delta * 30); e.preventDefault(); }); }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 页面横向滚动 喜欢 (0)or分享 (0)
