JQuery的scrollTop - 跨浏览器兼容性问题 [英] JQuery scrollTop - cross browser compatibility issues

问题描述

昨天我遇到了一个在Chrome中运行的JQuery滚动脚本，但在IE和Firefox中没有问题。我询问了这个查询（ JQuery scroll（）/ scrollTop（）not在IE或Firefox中工作），昨天我标记为正确的答案，仅在今天意识到它不再适用于Chrome！

任何人都可以帮助我在所有现代浏览器上都能正常工作？

HTML

  < div id =dotted-line> 
< div id =up-arrow> ^ up< / div> 
< / div> 
  

JQuery

  //获取窗口大小值（跨浏览器兼容）
（函数（未定义）{
 var container = $（html，body）; 
 $ .windowScrollTop = function （newval）{
 if（newval === undefined）{
 return container.scrollTop（）; 
} 
 else {
 return container.scrollTop（newval） ; 
} 
} 
}）（）; 
 
 //在滚动处绘制虚线
 $（window）.scroll（function（）{
 
 if（$ .windowScrollTop（）> 10）{ 
 var pos = $ .windowScrollTop（）; 
 $（'＃dashes'）。css（'height'，pos / 4）; 
 $（'＃footer-dot'）。 css（'top'，pos / 4）; 
} else {
 $（'＃dashes'）.css（'height'，'6px'）; 
 $（'＃footer -dot'）.css（'top'，' -  150px'）; 
} 
}）; 
  

解决方案

scrollTop（）将只返回集合
$（'html，body'）中第一个匹配元素的值，这就是为什么它不再适用于chrome

我认为您最好的选择是使用：

  var container = $（document.scrollingElement ||html）; 
  

Yesterday I had an issue with a JQuery scrolling script that worked in Chrome but not in IE and Firefox. I asked this query (JQuery scroll() / scrollTop() not working in IE or Firefox) yesterday which I marked as being the correct answer only to realise today that it doesn't work in Chrome anymore!

Can anyone help me get this working on all modern browsers?

HTML

<div id="dotted-line">
    <div id="up-arrow">^up</div>
</div>

JQuery

//get window size values (cross browser compatible)
(function(undefined) {
    var container = $("html,body");
    $.windowScrollTop = function(newval) {
        if( newval === undefined) {
            return container.scrollTop();
        }
        else {
            return container.scrollTop(newval);
        }
    }
})();

//draw dotted line on scroll    
$(window).scroll(function(){

    if ($.windowScrollTop() > 10) {
        var pos = $.windowScrollTop();
        $('#dashes').css('height',pos/4);
        $('#footer-dot').css('top',pos/4);
    } else {
        $('#dashes').css('height','6px');
        $('#footer-dot').css('top','-150px');
    }
});

解决方案

scrollTop() will return value of only first matched element in set $('html,body'), that's why it no more works on chrome

I think your best bet would be to use:

var container = $(document.scrollingElement || "html");

这篇关于JQuery的scrollTop - 跨浏览器兼容性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！