zoukankan      html  css  js  c++  java
  • js实现页面消息滚动效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>autoScroll</title>
    </head>
    <style>
    .parent {
     300px;
    height: 200px;
    margin: 0 auto;
    background: #242424;
    overflow-y: scroll;
    }
    /*设置的子盒子高度大于父盒子,产生溢出效果*/
    .child {
    height: auto;
    }
    .child li {
    height: 50px;
    margin: 2px 0;
    background: #009678;
    }
    </style>
    <body>
    <div id="parent" class="parent">
    <div id="child1" class="child">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    <li>8</li>
    </div>
    <!-- <div id="child2" class="child"></div> -->
    </div>
    <script type="text/javascript">
    (function () {
    var parent = document.getElementById('parent');
    var child1 = document.getElementById('child1');
    setInterval(function () {
    console.log(parent.scrollTop,child1.scrollHeight,parent.scrollHeight)
    if(parent.scrollTop >= child1.clientHeight-parent.clientHeight) {
    parent.scrollTop = 0;
    } else {
    parent.scrollTop++;
    }
    }, 20);
    })()
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    读取.robot文件写入excel文件中示例
    提示框、滚动条处理与JS的应用
    下拉框
    切换框架ifame
    层级定位
    定位一组元素
    Appium元素定位方法
    python+appium基本启动配置
    adb命令使用
    Python接口测试框架搭建
  • 原文地址:https://www.cnblogs.com/gitnull/p/14006960.html
Copyright © 2011-2022 走看看