У нас есть выпадающий список, который переключает div между display:none и display:block.Когда раскрывающийся список открывается, я хочу, чтобы страница оставалась неподвижной, поэтому мышь остается на кнопке, на которой она находилась.
Проблема заключается в том, что иногда, когда пользователь прокручивается полностью до нижней части страницы,положение прокрутки будет придерживаться нижней части страницы, вместо сохранения текущей координаты 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>
Если вы нажмете кнопку открытия, он переключит красный div с id to-open.
Воспроизвести на Chrome: (firefoxне делает этого)
- Откройте раскрывающийся список.
- Прокрутите страницу до конца, чтобы ваш браузер коснулся конца страницы.
- Закройтепадать.Это прокручивает браузер, так как страница становится короче.
- Откройте ее снова.
- Обратите внимание, что прокрутка в настоящее время находится внизу страницы, даже если мы не прокручивали, так как мы сделалистраница длиннее.
Я знаю, что это происходит, когда она закрыта, так как страница становится короче.Это не проблема, о которой идет речь.Речь идет о том, когда выпадающий список открыт , а браузер увеличивает координату y, поэтому он все еще находится внизу.
Обратите внимание, что код состоит из трех строк javascriptзакомментирован.Это почти решает проблему, но при использовании этого javascript мерцание экрана движется, чего я бы предпочел избежать.