【发布时间】：2010-10-26 08:23:16
【问题描述】：
更新：我留下了以下 javascript 代码以显示问题是如何随着时间的推移而发展起来的，但现在事实证明这与 javascript 无关，因为 javascript 不是问题所在。请看下面的 html/css 代码。
对于带有大菜单的概览页面，我实现了以下功能 (most of which I stole from here)：
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
alert(elemBottom);
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
$(document).ready(function(){
var overview = $('#overview');
var active = $('#active-item');
if (!isScrolledIntoView(active))
{
$('#overview li.active-parent').each(function(index, value){
if (!isScrolledIntoView(active)) overview.scrollTo(value);
});
}
if (!isScrolledIntoView(active)) overview.scrollTo(active);
});
这个想法是，在每次页面加载后，包含的菜单都会滚动到当前#active-item 可见的位置。最好滚动到它的第一个父项（菜单项在树中），否则滚动到项目本身。
现在这在 Firefox 和 Chrome 中运行良好（没有苹果人向我抱怨过），但是 Opera 做了一件非常奇怪的事情：它向下滚动到正确的元素，然后在滚动所有之前暂停很短的时间再次上升
有人知道吗
- 发生了什么，以及
- 我该如何阻止它？
谢谢，
更新：我正在 linux (Fedora) 上使用 10.63 版进行测试
更新：看来我的搜索方向完全错误。这个问题似乎是一个 css 问题，可以使用以下代码复制：
<html>
<head>
<title>Opera scroll test</title>
<style>
.main:after
{
content: 'abc';
}
:focus
{
padding: 0px;
}
#overview
{
display: block;
float: left;
width: 219px;
height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div id="main" class="main">
<div id="overview">
<ul>
<?
for($i = 1; $i < 100; $i++)
echo '<li>'.$i.'</li>';
?>
</ul>
</div>
<div>
<p>123</p>
</div>
</div>
</body>
</html>
现在，如果您在导航窗格上向下滚动，并将鼠标向右移动（在内容窗格上方），导航窗格的滚动将被重置。
很抱歉浪费大家的时间来寻找 javascript :(
如果有任何 css 大师知道如何解决它，或者谁能简单地解释发生了什么，我将非常感激。
更新：在 Opera 10.63 的 windows 中测试了上述代码。发生同样的奇怪行为。
更新：已将此作为错误报告给 Opera。不知道会发生什么......
【问题讨论】：
-
您能解释一下为什么您不只是为此使用本机“scrollIntoView()”API 吗？
-
第一次听说...现在试了一下，在opera中也有同样的行为
-
歌剧版本丢失。 jsFiddle 会很有帮助。提示：尝试使用 scrollTo() 的简单 oneliner 看看它是否有效。
-
这似乎在多种情况下发生：该问题与上面发布的确切代码没有密切关系。
-
您为什么不尝试使用不同版本的 Opera / OS 进行测试...？你的代码似乎没问题。