在 div 内部时，jQuery 滚动无法正常工作

Posted

技术标签:

【中文标题】在 div 内部时，jQuery 滚动无法正常工作【英文标题】：jQuery scroll is not working correctly when inside div 【发布时间】：2011-04-26 00:50:02 【问题描述】：

我创建了一个 jQuery 函数，它将一个类应用于一个段落，然后在单击按钮时滚动到该段落。当段落相对于文档时它工作正常，但我希望滚动发生在 div 内。目前，滚动正在工作，并且它正在正确应用类，但它没有滚动到正确的段落。似乎每次单击按钮时它都会随机滚动到一个。

<!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>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
        $(function() 

                $('.down').click(function() 
                    $('.current + p').addClass('current');
                    if ($('p:last').hasClass('current')) 
                        $('p').removeClass('current');
                        $('p:last').addClass('current');
                        return false;                   
                    
                    else 
                    $('.current:first').removeClass('current');
                    return false;
                    
                );

                $('.up').click(function() 
                    $('.current').prev('p').addClass('current');
                    if ($('p:first').hasClass('current')) 
                        $('p').removeClass('current');
                        $('p:first').addClass('current');
                        return false;
                    
                    else 
                    $('.current:last').removeClass('current');
                    return false;
                
            );
            $('.down, .up').click(function() 
                $('.slider').animate(scrollTop: $(".current").offset().top,'slow');
            );
        );
</script>

<style type="text/css">
.slider 
position: relative;
background: #ccc;
overflow: scroll;
height: 100px;

.slider p 
position: relative;

.nav 
position: fixed;
left: 500px;
z-index: 10;


p 
height: 100px;

</style>

</head>

<body>

<div class="nav">
<a href="#" class="up">UP</a>
<a href="#" class="down">DOWN</a>
</div>

<br /><br />
<div class="slider">
<p class="current">This is the first paragraph</p>
<p>111111111111111111111111</p>
<p>222222222222222222222222</p>
<p>333333333333333333333333</p>
<p>44444444444444444444444444</p>
<p>This is the last paragraph</p>
</div>


</body>
</html>

要查看它何时起作用，请将 CSS 中的“.slider”更改为 height: 1000px 并且没有溢出。另外，更改此行：

$('.slider').animate(scrollTop: $(".current").offset().top,'slow');

到这里：

$('html,body').animate(scrollTop: $(".current").offset().top,'slow');

【问题讨论】：

【参考方案1】：

适当使用“this”关键字可能会有所帮助。

【讨论】：

以上是关于在 div 内部时，jQuery 滚动无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章

拖动到滚动 div 时，Scriptaculous Draggable/Droppable 脚本无法正常工作

如何为 div 设置水平滚动，以便在通过 jQuery 添加项目时

使用 jQuery 动画的 div 滚动

嵌套滚动视图的滚动无法正常工作

jQuery slideDown 无法正常工作

是否有更好的方法在 iPhone 的 Safari 中滚动页面（使用 jQuery）（scrollTop 无法正常工作）