您現在的位置: 365建站網 > 365學習 > jquery中scrollTop在animate,移動端和電腦端設置無效的原因及解決辦法

jquery中scrollTop在animate,移動端和電腦端設置無效的原因及解決辦法

文章來源:365jz.com     點擊數:5237    更新時間:2018-05-24 16:13   參與評論

在做項目時,需要設置一個隱藏的元素的scrollTop,然后將其顯示。當時使用了jQuery的scrollTop方法,但是無效,百度了許久,仍找不出有效的解決方法。于是自己新建了一個網頁用來測試scrollTop方法失效的原因,在一番折騰后,終于弄清楚了問題的原因和解決辦法。

     scrollTop失效的原因

   當一個元素的display屬性為'none'時,對該元素設置scrollTop屬性是無效的,所以,即使是jQuery的scrollTop方法也會無效。

 

   解決辦法

   設置元素為可見狀態(el.style.display='block'),就可以設置原生的el.scrollTop屬性或者是jQuery的scrollTop方法了。

最近用到scrolloTop()想去獲取滾動條距離頂部的距離,結果只有chrome下面可以正常的獲取scrollTop,結果ff和ie下這個值都等于0,使得許多效果比如屏幕滾動等等均無法正常實現。究其原因是scrollTop()在各個瀏覽器中的兼容性問題,在ff和ie,以及是否有doctype聲明的時候都會有不同的效果。

下面是兼容各種瀏覽器的寫法,分別為獲取當前的scrollTop和設置scrollTop:

 

//兼容方式獲取scrolltop以及設置scrolltop 
    function getScrollTop() { 
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
        return scrollTop; 
    } 
 
    function setScrollTop(scroll_top) { 
        document.documentElement.scrollTop = scroll_top; 
        window.pageYOffset = scroll_top; 
        document.body.scrollTop = scroll_top; 
    } 


測試后發現無兼容問題。

jQuery Mobile 使滾動條滾動到底部scrollTop函數無效的解決方法

$('body').scrollTop(100);

我們使用上面的scrollTop函數時發現滾動后又閃回頂部,原因是在jquery mobile 中要使用另外的函數

$.mobile.silentScroll(100); 這個函數需要你點擊DIV再調用才有效果,如果一開始就設置是沒效果的

像下面用是沒效果的

 

$(document).ready(function() {
$.mobile.silentScroll(100);
});


需要像下面這樣才有效果
 

$(document).ready(function() {
$('div').on('click',function(){$.mobile.silentScroll(100);});
});

下面是在網上找到的,設置滾頓條位置
 

//scroll to Y 100px  
$.mobile.silentScroll(100);

設置根據顯示時寬度的最大最小信息設置HTML斷點,我沒用過,我猜會讓斷點以后的html不顯示。$.mobile.addResolutionBreakpoints (method)Add width breakpoints to the min/max width classes that are added to the HTML element.
//add a 400px breakpoint 
$.mobile.addResolutionBreakpoints(400); 
//add 2 more breakpoints  
$.mobile.addResolutionBreakpoints([600,800]); 


問題

正在開發移動web,使用的是較為輕量的zepto.js,在移動端chrome測試時,突然發現返回頂部的功能失效,也沒有任何報錯,其他瀏覽器都運行通過,解決后記錄下來。

//這段代碼在chrome移動端失效

$(document.body).scrollTop(0);

解決辦法

有這個問題的更改為下列代碼

//將事件掛載到window對象上,就可以正常運行了

$(window).scrollTop(0);

jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持問題的解決

jQuery中animate()的方法可以去w3school查看,這里主要說一下:
 

$("body").animate({"scrollTop":top})


不被Firefox支持問題的解決。

其實是使用body的:

 

$("body").animate({"scrollTop":top})


只被chrome支持,而不被Firefox支持。

而使用html的:

 

$("html").animate({"scrollTop":top})


只被Firefox支持,而不被chrome支持。

如果想讓這段js被chrome和Firefox都支持的話,應該這樣:

 

$("html,body").animate({"scrollTop":top})


看到了嗎,就是將html和body這兩者都加上就可以了。
 

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


發表評論 (5237人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 亚洲熟妇av一区| 欧美人禽杂交av片| 18japanese宾馆直播| 我家娘子只想种田免费阅读| 大香线蕉在线观看| 日本私人电影院免费观看| Kagney Linn Karter| 欧洲美熟女乱又伦| 高龄熟女の中出しセックス| tube19up老师学生| 欧美60老妇p|us| 我和岳坶双飞| 亲胸揉胸膜下刺激视频试看| 男女啪啪嘿咻gif动态图| 亚洲欧美国产综合| 午夜神器18以下不能进免费| 1300部真实小u女视频合集| 成熟女人色惰片| japonensisjava日本| 97碰碰碰人妻无码视频| 出差我被公高潮a片| 丰满熟女高潮毛茸茸欧洲| 久久爱在线看观看中文| 苍老师免费av在线播放| 俄罗斯老太婆牲交视频| 妺妺窝人体色www视频| 情侣自拍| 亲子乱子伦视频| 奇米四色狠狠中文字幕| a片在线观看全免费| 国模野外裸体自拍| http://www.freebies-online.com