您现在的位置: 365建站网 > 365学习 > jquery/js滚动条事件scroll的用法

jquery/js滚动条事件scroll的用法

文章来源:365jz.com     点击数:150    更新时间:2019-06-19 23:34   参与评论

js滚动条事件:


<div> 元素滚动时执行 JavaScript

<div onscroll="myFunction()">

onscroll 事件在元素滚动条在滚动时触发。


提示: 使用 CSS overflow 样式属性来创建元素的滚动条。


jQuery滚动条事件:

对元素滚动的次数进行计数:

$("div").scroll(function() {
  $("span").text(x+=1);
});


定义和用法

当用户滚动指定的元素时,会发生 scroll 事件。


scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。


scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。

最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现。

1.scroll()事件

当用户滚动指定的元素时,会发生scroll事件。适用于所有可滚动的元素和window对象(浏览器窗口)

$(select).scroll([Data],fn);

当(浏览器窗口)页面滚动条变化时,执行的函数,JQuery代码:

$(window).scroll(function(){
  //do something...
});

 

2.scrollTop 获取匹配元素相对滚动条顶部的偏移

scrollTop(val)

获取页面滚动条的具体值:$(document).scrollTop();

设置相对滚动条的偏移值:$(document).scrollTop(300);

 

3.offset() 获取匹配元素在当前视口的相对偏移。

offset([coordinates])

获取元素的相对偏移:$(".bg02").offset().top;

设置元素的相对偏移:$(".bg02").offset({"top":1000, "left":0});

 

4.需求:当(浏览器窗口)页面滚动条值小于300px时隐藏div,大于300px时显示div

$(window).scroll(function(){
  //var ds = document.documetElement.scrollTop || document.body.scrollTop;  //js兼容获取滚动条
  if($(document).scrollTop() < 300){
    $(".position").css({"display":"none"});
  }else{
    $(".position").css({"display":"block"});
  }
});

 

5.返回顶部和元素定位(1-10)

$(".position ul li").click(function(){
  var num_index = $(this).index() + 1;
      if(num_index < 10){
      $("HTML,body").animate({scrollTop:$(".bg0" + num_index).offset().top},800);
      }else if(num_ineex ==10){
    $("html,body").animate({$(".bg"+num_index).offset().top},800);
  }else if(num_index == 11){
    $("html,body").animate({scrollTop:0},800);
      }else{
    return false;
      }
});


js例子:

<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>
#scrollup{
        background: #777;
        color:#eee;
        font-size: 40px;
        text-align: center;
        text-decoration: none;
        bottom:65px;
        right:20px;
        overflow: hidden;
        width:46px;
        height:46px;
        border:none;
        opacity:.8;
        &:active{opacity:.7;}
    }
<script type="text/javascript">
         window.onscroll= function(){
                //变量t是滚动条滚动时,距离顶部的距离
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollup = document.getElementById('scrollup');
                //当滚动到距离顶部200px时,返回顶部的锚点显示
                if(t>=200){
                    scrollup.style.display="block";
                }else{          //恢复正常
                    scrollup.style.display="none";
                }
            }
</script>


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论