jquery移动端滑动条

在移动端开发中，滑动条是一个常见的组件，它可以让用户对页面内容进行滑动浏览，增加了交互性和体验性。利用jQuery库，我们可以很方便地实现一个移动端滑动条。

<div id="scroll-wrapper">
    <div id="scroll-content">
        <p>这里是滑动内容1</p>
        <p>这里是滑动内容2</p>
        <!--更多内容-->
    </div>
</div>



<script>
$(document).ready(function() {
    $('#scroll-wrapper').on('touchmove',function(event) {
        event.preventDefault();
        var startY = event.originalEvent.touches[0].pageY,top = $(this).scrollTop(),totalScroll = $(this)[0].scrollHeight - $(this).outerHeight(),currentScroll = top + startY;

        $(this).scrollTop(currentScroll - startY);
    });
});
</script>

以上代码中，我们首先需要创建两个div，一个外层包裹容器#scroll-wrapper（设置其高度和overflow:hidden即可）和一个滑动内容容器#scroll-content（高度设置为auto，overflow-x:hidden，-webkit-overflow-scrolling:touch）。

接下来，我们为#scroll-wrapper绑定touchmove事件，利用event.preventDefault()禁止默认事件，然后获取滑动的起始位置和当前滚动位置，最后通过scrollTop()方法将滚动内容移动到正确位置。而通过(totalScroll = $(this)[0].scrollHeight - $(this).outerHeight())计算出了可滚动的总距离。

这样，我们就实现了一个简单的移动端滑动条，可以适用于各种移动端Web应用。如果需要更多个性化的滑动条效果，可以根据需求自行调整代码。