+
96
-

js怎么控制一个元素scroll滚动条每次滚动的距离和点击上下按钮滚动的距离?

js怎么控制一个元素scroll滚动条每次滚动的距离和点击上下按钮滚动的距离?

网友回复

+
16
-

可以通过mousewheel插件来监听,然后设置scrolltop参数来手动移动,完整代码如下,可在线运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <script id="bfwone" data="dep=jquery.17|jquery.mousewheel.3.13.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        function wheel($div, deltaY) {
            var step = 30;
            var pos = $div.scrollTop();
            var nextPos = pos + (step * (-deltaY))
            console.log("DelatY: " + deltaY + ", Step: " + step + ", nextPos: " + nextPos);
            $div.scrollTop(nextPos);
        }
        bready(function() {


            $('#test').bind('mousewheel', function (event, delta, deltaX, deltaY) {
                if (delta > -2 && delta < 2) {
                    wheel($(this), deltaY);
                    event.preventDefault();
                }
                console.log(delta);
            });


        });
    </script>
    <style type="text/css">
        #test {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }
        body, html {
            margin: 0;
            padding: 0;
            height: 1...

点击查看剩余70%

我知道答案,我要回答