您現在的位置: 365建站網 > 365學習 > jquery/js滾動條事件scroll的用法

jquery/js滾動條事件scroll的用法

文章來源:365jz.com     點擊數:1112    更新時間: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>


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (1112人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 中国freebi0deS老人| 被灌满得肚子鼓起来了| 久久人人做人人玩人人妻精品| 手机在线观看的a站免费2020| 337p西西人体大胆瓣开下部| 放课后的秘密画室| 久久97人人超人人超碰超国产| 小寡妇高潮喷水了| 午夜精品福利一区二区三区| 修罗战神江策丁梦妍全文免费阅读| 不怕我慢点进就不会痛了| 西西人体WWW大胆高清视频| 一本大道一卡二卡三卡| 国产chinesehdxxxx| 男女牲交真实图片| 四个老头玩个女子奶头| 狠狠色噜狠狠狠狠的777米奇| 风流妇科男医| 女上男下下吸吮奶动态| 亚洲欧洲另类春色小说| 一区二区三区高清av专区| 秋霞免费理论片在线观看| 不要太满了鼓起来了别按| 丰满肥胖的日本肥婆| 日韩av无码免费手机在线观看| 乱中年女人伦av三区| 粉嫩虎白女流水| z o oz o o人与猪| 女性自慰| chinese中国帅男飞机| 翁熄春房情意浓| http://www.e-fixus.com