Question

这是一个常见的情况：我有两个div，我们称其为 first 和 second 。两个div中都有很多文字。

第二个div最初是隐藏的（display: none），具有position: fixed。当第二个div出现并且您尝试在iOS Safari上垂直滚动时，就会出现问题。

在第二个div上使用-webkit-overflow-scrolling: touch会有很大帮助，但是如果由于某种原因该div失去了焦点，那么它将永远消失。

因此，在我的情况下，我使用的是过渡效果，当某些“匆忙的用户”尝试滚动（不等待过渡完成）时，它将“焦点”设置为第一个div并还原它，仅这样做刷新整个页面。

您可以在此处看到一个简单的演示：https://iosscroll--brunosp.repl.co/ 错误

在这里：

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>

在iOS上显示模态的推荐方法？

0 个答案: