案例：自动滚轮

作者: Hello杨先生 | 来源:发表于2019-07-09 16:17 被阅读2次

案例：自动滚轮
IDEA
案例-鼠标滚轮改变div高度
JS实例-事件对象2
禁用滚轮开启滚轮
ubuntu的复制粘贴
瀑布流布局
二十二、jquery之——滚轮事件、正则
滚轮事件和函数节点流，本地存储，jQueryUI
滚轮事件与函数节流、ajax与jsonp

image.png

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li,
        ul {
            list-style: none;
        }
    </style>

<body>
    <div style="width:400px ;height: 100px ; overflow:hidden ;background: gray ;margin: 0 auto ">
        <ul>
            <li style="width:400px;height: 100px;line-height:100px;background: red ;">111</li>
            <li style="width:400px;height: 100px;line-height:100px;background: blue ;">222</li>
            <li style="width:400px;height: 100px;line-height:100px;background: yellow ;">333</li>
            <li style="width:400px;height: 100px;line-height:100px;background: green ;">444</li>
            <li style="width:100px;height: 100px;background: pink ;">444</li>
            <li style="width:100px;height: 100px;background: black ;">444</li>
            <li style="width:100px;height: 100px;background: aqua ;">444</li>
        </ul>
    </div>

    <script>
        var MyDiv = document.getElementsByTagName("div")[0];
        var myUl = document.getElementsByTagName("ul")[0];
        var myLi = document.getElementsByTagName("li");
        function scroll() {
            if (myUl.offsetHeight - MyDiv.scrollTop <= 100){  
                MyDiv.scrollTop = 0;
            }else{
                MyDiv.scrollTop = MyDiv.scrollTop + 5;
            }
            console.log(MyDiv.scrollTop) ;
        }
        setInterval(scroll ,20);



    </script>
</body>