Question

我们有一个下拉列表，可以通过在display:none和display:block之间切换div来工作。打开下拉菜单后，我希望页面保持静止，以便鼠标停留在原来的按钮上。

问题是，有时当用户一直滚动到页面底部时，滚动位置将停留在页面底部，而不是保持当前的y坐标。

下面显示了一个有此问题的小示例页面：

document.addEventListener("DOMContentLoaded", function() {
	var openclose = document.getElementById('openclose');
    var area = document.getElementById('to-open');
    var isOpen = false;
    openclose.onclick = function() {
    	// var x = window.scrollX;
    	// var y = window.scrollY;
        // setTimeout(function() { window.scroll(x,y); });
    	if (isOpen) {
        	area.style.display = 'none';
        } else {
        	area.style.display = 'block';
        }
        isOpen = !isOpen;
    };
});

<!DOCTYPE html>
<html>
<body>
<div style="height: 1000px;">
	Filler so we get a scroll bar.
</div>
<div style="width:100%;margin:4px;background-color:#ccc;">
<div id="openclose" style="float:right;">Open</div>
test
</div>
<div id="to-open" style="display:none;background-color:red;height:100px;margin:4px;">
content
</div>
</body>

</html>

如果按下打开按钮，它将切换ID为to-open的红色div。

要在chrome上复制，（firefox不会这样做）

打开下拉列表。
一直滚动到页面的下方，这样您的浏览器便会触及页面的结尾。
关闭下拉菜单。由于页面变短，这将使浏览器向上滚动。
再次打开。
请注意，即使我们由于加长页面而没有滚动，滚动条也位于页面底部。

我知道关闭页面会发生这种情况，因为页面变短了。这不是这个问题所要解决的问题。这是关于何时打开下拉菜单和浏览器增大 y坐标，以便它仍在底部的情况。

请注意，该代码已注释掉三行JavaScript。这几乎可以解决问题，但是在使用此javascript时会有屏幕闪烁的现象，我宁愿避免。

打开下拉菜单时，滚动条将滚动到底部

0 个答案: