Это обычный случай: у меня есть два div, давайте назовем first и second .В обоих div есть много текста.
Второй div изначально скрыт (display: none) и имеет position: fixed.Проблема возникает, когда появляется этот второй div и вы пытаетесь вертикально прокрутить его в iOS Safari.
Использование -webkit-overflow-scrolling: touch во втором div очень помогает, но если по какой-то причине этот div потерял фокус, он потерян навсегда.
Итак, в моем случае я использовал эффект перехода, когда некоторые «спешащие пользователи» пытались прокрутить (не дожидаясь перехода до конца), он устанавливает «фокус» на первом элементе div и возвращает его, только делая обновление на всей странице.
Вы можете увидеть простую демонстрацию здесь: https://iosscroll - brunosp.repl.co/ false
А здесь:
let first = document.getElementById("first")
let second = document.getElementById("second")
document.getElementById("toggleButton")
.addEventListener('click', () => {
debugger
if(second.style.display == 'none') {
first.style.display = 'block'
}
else if(second.style.display == 'block' || second.style.display === '') {
second.style.display = 'block'
}
})
#first {
overflow: scroll;
display: block;
color: red;
margin-top: 40px;
z-index: 100;
}
#second {
overflow: scroll;
display: none;
color: blue;
z-index: 200;
position: fixed;
top: 0;
background: white;
height: 80vh;
-webkit-overflow-scrolling: touch;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="toggleButton">
Toggle
</button>
<div id="first" class="animated fadeInLeft ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum sed arcu non odio euismod lacinia. Eu non diam phasellus vestibulum lorem sed risus. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Lectus nulla at volutpat diam. Sit amet luctus venenatis lectus magna fringilla. Elit ut aliquam purus sit amet luctus venenatis. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Platea dictumst vestibulum rhoncus est. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Urna id volutpat lacus laoreet non curabitur gravida arcu. Est placerat in egestas erat imperdiet sed euismod nisi. Eu scelerisque felis imperdiet proin fermentum.
Sollicitudin tempor id eu nisl nunc. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Suspendisse sed nisi lacus sed viverra. Adipiscing elit pellentesque habitant morbi. Neque volutpat ac tincidunt vitae semper quis lectus. Sem viverra aliquet eget sit amet. Consectetur lorem donec massa sapien. Aliquam etiam erat velit scelerisque in. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Enim sed faucibus turpis in eu. Eu scelerisque felis imperdiet proin. Cras sed felis eget velit aliquet sagittis id consectetur.
Venenatis a condimentum vitae sapien pellentesque habitant morbi. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Sodales ut etiam sit amet nisl. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Eu non diam phasellus vestibulum lorem sed risus ultricies tristique. Enim tortor at auctor urna nunc id cursus metus aliquam. Suspendisse potenti nullam ac tortor vitae. Nibh venenatis cras sed felis eget velit. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Habitant morbi tristique senectus et netus et. Lectus quam id leo in vitae turpis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Suspendisse ultrices gravida dictum fusce ut placerat.
</div>
<div id="second" class="animated fadeInLeft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu dictum varius duis at consectetur. Dui id ornare arcu odio. Nisi lacus sed viverra tellus. Fames ac turpis egestas integer. Rhoncus dolor purus non enim praesent elementum facilisis leo. At tellus at urna condimentum mattis pellentesque id. Pulvinar neque laoreet suspendisse interdum consectetur libero. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Nec nam aliquam sem et tortor consequat. Congue quisque egestas diam in arcu cursus.
Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Interdum consectetur libero id faucibus nisl tincidunt. Nec ultrices dui sapien eget mi. Volutpat sed cras ornare arcu. Pretium quam vulputate dignissim suspendisse in est ante. Facilisis volutpat est velit egestas dui id ornare arcu odio. Consequat nisl vel pretium lectus quam id leo. Vitae congue eu consequat ac. Suspendisse sed nisi lacus sed viverra. Consectetur purus ut faucibus pulvinar elementum. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Dictum sit amet justo donec. Purus viverra accumsan in nisl. Diam volutpat commodo sed egestas egestas fringilla phasellus.
Euismod lacinia at quis risus sed vulputate odio. Risus pretium quam vulputate dignissim suspendisse in est. Mattis nunc sed blandit libero volutpat sed. Neque sodales ut etiam sit amet nisl. Dictum fusce ut placerat orci nulla pellentesque. Vivamus at augue eget arcu dictum varius duis at consectetur. Sed odio morbi quis commodo odio aenean sed. Turpis in eu mi bibendum. Quis viverra nibh cras pulvinar mattis nunc sed blandit libero. Sed cras ornare arcu dui. Lorem donec massa sapien faucibus et molestie ac. Fringilla phasellus faucibus scelerisque eleifend. Habitasse platea dictumst quisque sagittis. Enim lobortis scelerisque fermentum dui faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Placerat duis ultricies lacus sed. Dignissim convallis aenean et tortor at risus viverra adipiscing. Facilisis sed odio morbi quis commodo odio. Quisque non tellus orci ac. Sed blandit libero volutpat sed cras ornare arcu dui vivamus.
</div>
<script src="script.js"></script>
</body>
</html>