zoukankan      html  css  js  c++  java
  • 设置滚动条样式与监听滚动到底部

    代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .scroll_wrap{width:100%;display:flex;justify-content:center;align-items:center;margin-top:100px;}
                /* 滚动条 */
                .scroll_cont{width:400px;height:600px;overflow-y:scroll;}
                /* webkit */
                ::-webkit-scrollbar {width: 5px;height: 5px;background-color: #fff;}
                /*定义滚动条轨道 内阴影+圆角*/
                ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);border-radius: 10px;background-color: #fff;}
                /*定义滑块 内阴影+圆角*/
                ::-webkit-scrollbar-thumb{border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.9);background-color: #fff;}
            </style>
        </head>
        <body>
            <div class="scroll_main">
                <div class="scroll_wrap">
                    <div class="scroll_cont">
                        <p>jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们的熟知,越
                            来越多的程序高手加入其中,完善和壮大其项目内容 ;如今已发展成为集 JavaScript、CSS、
                            DOM、Ajax 于一体的强大框架体系,它的主旨是 :以更少的代码,实现更多的功能(Write
                            less,do more)。</p>
                        <p>jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们的熟知,越
                            来越多的程序高手加入其中,完善和壮大其项目内容 ;如今已发展成为集 JavaScript、CSS、
                            DOM、Ajax 于一体的强大框架体系,它的主旨是 :以更少的代码,实现更多的功能(Write
                            less,do more)。</p>
                        <p>jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们的熟知,越
                            来越多的程序高手加入其中,完善和壮大其项目内容 ;如今已发展成为集 JavaScript、CSS、
                            DOM、Ajax 于一体的强大框架体系,它的主旨是 :以更少的代码,实现更多的功能(Write
                            less,do more)。</p>
                        <p>jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们的熟知,越
                            来越多的程序高手加入其中,完善和壮大其项目内容 ;如今已发展成为集 JavaScript、CSS、
                            DOM、Ajax 于一体的强大框架体系,它的主旨是 :以更少的代码,实现更多的功能(Write
                            less,do more)。</p>
                        <p>jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们的熟知,越
                            来越多的程序高手加入其中,完善和壮大其项目内容 ;如今已发展成为集 JavaScript、CSS、
                            DOM、Ajax 于一体的强大框架体系,它的主旨是 :以更少的代码,实现更多的功能(Write
                            less,do more)。</p>            
                    </div>
                </div>
            </div>
            <script>
                // 监听滚动条滚动到最底部
                document.querySelector('.scroll_cont').addEventListener('scroll',divScrollEv,true);
                
                function divScrollEv(){
                    var scrollHeight = document.querySelector('.scroll_cont').scrollHeight;
                    var scrollTop = document.querySelector('.scroll_cont').scrollTop;//0-18
                    var clientHeight = document.querySelector('.scroll_cont').clientHeight;//233
                    if (scrollTop + clientHeight >= scrollHeight) {
                     //滚动条滚到最底部
                        console.log('到底')
                    }
                }
            </script>
        </body>
    </html>

    效果:

  • 相关阅读:
    python基础练习题(输入三个整数x,y,z,请把这三个数由小到大输出)
    python基础练习题(一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?)
    python基础练习题(九九乘法表)
    四步测试设计法—摘自《测试架构师修炼之道》
    砍价活动风控的跟踪记录
    C#窗口程序CPU占用高的原因和解决方法(转)
    C# 开启一个新线程
    C# 在关闭窗口程序时执行一些操作
    关于在Linux下执行程序时,需要配置路径的/etc/ld.so.conf详解【转】
    QT新建窗体程序,出现错误 unkown type name ‘QApplication’ 和 unkown type name ‘MainWindow’解决方法
  • 原文地址:https://www.cnblogs.com/hongrun/p/14667583.html
Copyright © 2011-2022 走看看