js自定义滚动条每次滚动的距离步长-html代码-BFW代码库

js自定义滚动条每次滚动的距离步长

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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: 100%;
            width: 100%;
            position: relative;
        }

        .test2 {
            width: 100%;
            height: 3000px;
        }
        .block {
            height: 30px;
            box-sizing: border-box;
            width: 100%;
            background-color: green;
            border: 3px solid black;
        }

    </style>
</head>
<body>
    <div id="test">
        <div class="block"></div>
      .........完整代码请登录后点击上方下载按钮下载查看