Chrome、Opera 和 Safari 中的 jQuery 滚动问题答案

【问题标题】：Issue in jQuery scroll in Chrome,Opera & safariChrome、Opera 和 Safari 中的 jQuery 滚动问题
【发布时间】：2013-09-26 12:31:17
【问题描述】：

我正在尝试基于滚动为一个 div 添加淡入淡出效果，以下是相同的代码

<script type="text/javascript">
$(document).ready(function(e)
{
         $(window).scroll(function() {
            var currpos = $(window).scrollTop();
            if(currpos < 199)
            {
                if(currpos > 100)
                {
                    alert('100');
                    //$('#header').fadeTo(1,0.8,function(){});
                }
            }
            else if(currpos < 299)
            {
                if(currpos > 200)
                {
                    alert('200');
                    //$('#header').fadeTo(1,0.6,function(){});
                }
            }
            else if(currpos < 399)
            {
                if(currpos > 300)
                {
                    alert('300');
                    //$('#header').fadeTo(1,0.4,function(){});
                }
            }
            else if(currpos < 499)
            {
                if(currpos > 400)
                {
                    alert('400');
                    //$('#header').fadeTo(1,0.2,function(){});
                }
            }
            else if(currpos < 599)
            {
                if(currpos > 500)
                {
                    alert('500');
                    //$('#header').fadeTo(1,0.1,function(){});
                }
            }
            else
            {
                alert("WOW");   
            }
     });
});
</script>

问题是这段代码在 Firefox 和 IE 中运行良好。但不是在 Chrome、Safari 和 Opera 中。此外，当我拖动滚动条时，代码工作得非常好，但在我使用鼠标滚轮时却不行。

非常感谢您对此提供任何帮助。

提前致谢！

【问题讨论】：

你能提供一个jsfiddle 来重现这个问题吗？因为我不能see this one
您可以只滚动结果区域。您会看到在 chrome 中，只有最后一个 else 语句正在执行，而不是前一个 if else 语句。如果您通过滚动结果区域在 Firefox 中进行检查，您会看到每个位置（即 100、200、300 等）都会发出警报。因此，滚动在 Chrome 中不起作用
您在哪个平台上使用哪个 Chrome？我在 os x 中的 chrome 29 似乎执行了正确的块
您的意思是您在 chrome 中收到 100、200 等的警报？我在 Windows 中使用 Chrome 并且是最新版本
不，它是 100、100、100... 直到 scrollTop 匹配第二个 if 语句。如果你想要 100,200，你应该手动处理它。

标签： javascript jquery html google-chrome scroll

【解决方案1】：

我已尝试将您的问题复制如下：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
         $(window).scroll(function() {
            var currpos = $(window).scrollTop();
.
.
.
    }

发现它在所有浏览器上都能正常运行，请尝试用上面添加的那个替换你的 jQuery 文件。

希望这会有所帮助。

这是在我的系统上运行良好的完整页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
$(window).scroll(function() {
var currpos = $(window).scrollTop();
alert(currpos);
if(currpos < 199)
{
if(currpos > 100)
{
alert('100');
//$('#header').fadeTo(1,0.8,function(){});
}
}
else if(currpos < 299)
{
if(currpos > 200)
{
alert('200');
//$('#header').fadeTo(1,0.6,function(){});
}
}
else if(currpos < 399)
{
if(currpos > 300)
{
alert('300');
//$('#header').fadeTo(1,0.4,function(){});
}
}
else if(currpos < 499)
{
if(currpos > 400)
{
alert('400');
//$('#header').fadeTo(1,0.2,function(){});
}
}
else if(currpos < 599)
{
if(currpos > 500)
{
alert('500');
//$('#header').fadeTo(1,0.1,function(){});
}
}
else
{
alert("WOW");   
}
});
});
</script>
</head>
<body style="height:2000px;">
</body>
</html>

复制粘贴并尝试一次。

【讨论】：