您现在的位置: 365建站网 > 365学习 > jquery中scrollTop在animate,移动端和电脑端设置无效的原因及解决办法

jquery中scrollTop在animate,移动端和电脑端设置无效的原因及解决办法

文章来源:365jz.com     点击数:3321    更新时间: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这两者都加上就可以了。
 

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


发表评论 (3321人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------