Это потенциально несколько странно определенный вопрос.Страница прокрутки вверх при закрытии модального с помощью кнопки «Назад» в мобильном Safari
Ситуация:
У меня есть страница с диалогом position:fixed модальной (на самом деле несколько, но это не имеет отношения к проблеме, насколько я смог определить). При нажатии на определенную ссылку открывается модальная мода. Сценарий прослушивает события hashchange, чтобы закрыть модальность, когда пользователь нажимает кнопку «Назад».
Ожидаемое поведение заключается в том, что при выходе из диалогового окна страница возвращается в положение прокрутки, где оно было до открытия модального. Это происходит почти во всех современных браузерах, которые я тестировал (настольные FF, Chrome, IE9/10/11 и Safari и Chrome для Android).
На iPhone/мобильном Safari страница вместо этого прокручивается назад.
Код испытания
Это также уменьшается, как я был в состоянии сделать это.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html, charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal test</title>
</head>
<body>
<h1>Header</h1>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<h1>Header</h1>
<p><a href="##popup" class="js-open-popup">Open popup</a></p>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<div id="#popup" style="background:#fff; width:300px; height:100px; border:2px solid #000; position:fixed; top:50px; left:50px; display:none">
Modal dialog.<br>
Hitting 'back' should close this modal.<br><br>
<a href="javascript:void(0)" class="js-close-popup">Close modal</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.js-close-popup').click(function(ev){
window.history.back();
return false;
});
$('.js-open-popup').click(function(ev){
$('#\\#popup').fadeIn(400);
});
});
$(window).on('hashchange', function(){
hash = window.location.hash.replace('#','');
if(hash == '' || hash.lastIndexOf('#', 0) !== 0){
$('#\\#popup').fadeOut(400);
}
});
})(jQuery);
</script>
</body>
</html>
То, что я хочу сделать, это убить свиток-вверх на айфонах, если это вообще возможно, не меняя слишком много обратной кнопку логики для всплывающих окон (или ломать что-то в других браузерах).
Я искал SO за X часов, но не смог найти упоминание об этой конкретной проблеме или действительно решение, которое работает. Не стесняйтесь ударить меня по пальцам и указать мне в правильном направлении, если я пропустил существующую нить, которая отвечает на мой вопрос.
EDIT: Чтобы уточнить, вскрытие всплывающих окон работает как ожидалось и не вызывает никакого «автоматического прокрутки».
Нет, это не так. Идентификаторы, начинающиеся с #, на самом деле являются точными HTML5 и CSS (см., Например, https://mathiasbynens.be/notes/css-escapes). Кроме того, ** ошибка сохраняется при удалении «постороннего» # из всплывающего идентификатора, ** так ... – Masala
http://stackoverflow.com/questions/1631924/preventing-onclick-page-jumps http: // stackoverflow.com/questions/2024342/link-with-href-scrolls-page-to-top-when-used-with-jquery-slidetoggle Выше ссылки могут вам помочь. – SSV
Спасибо, но нет, это была одна из первых вещей, которые я пробовал. Переход к вершине не происходит при нажатии ссылки, только когда вы возвращаетесь назад в истории браузера (хорошо, это также происходит, когда вы нажимаете ссылку Close в модальном режиме, но, как вы можете видеть выше, это вызывает только ' window.history.back() '). – Masala