JQuery在PC端实现手机触屏垂直滑动效果

最新推荐文章于 2021-01-18 10:24:05 发布

csmzl

最新推荐文章于 2021-01-18 10:24:05 发布

阅读量5.6k

点赞数

分类专栏： JS和JQuery 文章标签： jquery 手机垂直滑动浮层滚动条

本文链接：https://blog.csdn.net/csmzl/article/details/52794283

版权

本文介绍了如何使用JQuery在PC端模拟手机触屏的垂直滑动效果，解决因内容过多导致的滚动条问题。通过JQUERY代码，实现了鼠标单击和滚轮滑动时的上下滑动，提供了一种替代传统滚动条的美观解决方案。

摘要由CSDN通过智能技术生成

JQuery在PC端实现手机触屏垂直滑动效果

经常会遇到下拉框过长出现垂直滚动条的情况，有时候这个长度还是由用户来增加的。
比如：有一个评价菜单，单击它会出现一个浮层，这个浮层列出了很多评语，这些评语都是用户自己增加的，该帐号下的所有的用户增加的评价都会显示出来。很快这个浮层的长度就超过了窗口的长度，那就会出现滚动条，然后样式就丑爆了。
浮层的宽度本身就不宽，也就滚动条宽度的3-5倍，再就是滚动条的样式每个浏览器都不同。IE的滚动条只可以调整颜色，Chrome的滚动条颜色大小都可以改，Firfox的滚动条就直接没法改的。
个人觉得移动端的滑动效果挺方便实用的，于是想在pc端实现这个效果。水平滑动效果的代码网上其实已经有了，垂直滑动的我倒是没找着，所以自己整了一个。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test page</title>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <style type="text/css">
        li {width: 75px; }
    </style>
</head>
<body>
    <div class="aa" style="border: 1px solid red;curs