zoukankan      html  css  js  c++  java
  • JQ 滚动条监听事件

    1、当前滚动的地方的窗口顶端到整个页面顶端的距离:

            var winPos = $(window).scrollTop();

    2、获取指定元素的页面位置:

            $(val).offset().top;

    3、对页面滚动条滚动的监听:要放在页面加载的时候

          $(window).scroll(function(event){

        });

    4、设置滚动条到指定位置。$(window).scrollTop(offset)。

    以下内容转载自http://www.jb51.net/article/59965.htm

    本文实例讲述了jQuery中scrollTop()方法用法。分享给大家供大家参考。具体分析如下:

    语法结构一:

    当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量

    $(selector).scrollTop()
    

      实例代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                border:1px solid black;
                200px;
                height:200px;
                overflow:auto
            }
            #div2{height:250px;}
            #div3{
                height:48px;
                30px;
                border:1px solid red;
            }
        </style>
    
    </head>
    <body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
    <button>获得offset值</button>
    
    <script src="dist/js/jquery-1.11.3.js"></script>
    <script>
    
        $(document).ready(function(){
            $("button").click(function(){
                alert($("#div1").scrollTop()+" px");
            });
        });
        
    
    </script>
    </body>
    </html>

    语法结构二:

    当scrollTop()方法带有参数的时候置垂直滚动条顶部偏移为该值。

    $(selector).scrollTop(val)

    参数列表:

    参数 描述
    val 设定垂直滚动条值
      JS部分的代码如下,Html与CSS同上:
     
     $(document).ready(function(){
            $("button").click(function(){
                $("#div1").scrollTop(30);
            })
        })
    

      实现的效果为点击按钮后,垂直滚动条自动滚动到其顶部距离窗口上端的30px的位置。

     
  • 相关阅读:
    漫话性能:USE方法
    MIPI 屏参调试
    Linux下访问匿名页发生的神奇“化学反应”
    USB 2.0 suspend resume
    谈谈Linux内核驱动的coding style
    Apollo ROS原理(一)
    BMS(电池管理系统)第五课 ——核心!!!SOH算法开发
    蓝牙核心技术概述(一)蓝牙概述
    BMS(电池管理系统)第三课 ——BMS功能清单和采样要求
    登录密码加密vue版(转载)
  • 原文地址:https://www.cnblogs.com/potato-lee/p/6169121.html
Copyright © 2011-2022 走看看