我是初学者 我在这里阅读了几篇文章，发现有一种使用-webkit-overflow-scrolling的解决方案：但是它对我没有用，因为我认为我把它放错了地方。 我已经在Google Chrome和Safari上进行了测试。 我将包括我的HTML，我认为这可能与我设置页面的方式以及所有DIV有关。我已经读过Safari会在每个DIV或沿这些方向停下来的地方停止。
<body>
<div class="menu">
<div class="menu-wrapper">
<nav>
<a href="#" id="menu-icon"></a>
<ul class="header-menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="store.html">Prints</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="tutorial.html">Tutorials</a></li>
</ul>
</nav>
</div>
<div class="effect varrius">
<div class="effect aeneas">
<a href="https://www.facebook.com/steveroeneon" class="fb" title="Facebook" target="_blank"><i class="fab fa-facebook" aria-hidden="true"></i></a>
<a href="https://twitter.com/steveroe_" class="tw" title="Twitter" target="_blank"><i class="fab fa-twitter" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/steveroe_/" class="insta" title="Instagram" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<section class="hero">
<div class="hero-inner">
<img id='img-logo' src="steve_roe_umbrella_logo.png">
<section>
<a href="#" class="scroll-down" address="true"></a>
</section>
<section class="ok">
</section>
</div>
</div>
</div>
</section>
<div class="menu-container">
</div>
<div class="wrapper">
<div class="page2">
<div class="col-text">
<h2>Blog</h2>
</div>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3><a href="welcome.html" id="card-link">Welcome</a></h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3><a href="blog.html" id="card-link"> Kyoto</a></h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3><a href="best.html" id="card-link">Best of 2018</a></h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="footer_menu">
<ul class="page_footer">
<li><a href="work_with_me.html">Work With Me</a></li>
<li>
<a href="mailto:xxxxxxxxxx.com">Contact</a></li>
</ul>
</div>
</footer>
</div>
</div>
</div>
</body>
</html>
@media only screen and (max-width: 600px) {
* {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding: 0;
overflow-x: hidden;
position: relative;
}
.menu {
margin: 0 auto;
.menu-wrapper {
position: relative; float: right; top: 4%; right: 2%;
}
.effect {
position: absolute; float: left; left: 2%;
font-size: 20px;
}
.logo {
visibility: hidden;
}
#menu-icon {
display:inline-block;
}
}
nav ul, nav:active ul {
display: none;
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #444;
width: 100%;
height: 100%;
border-radius: 4px 0 4px 4px;
}
nav li {
transform: translatex(-5%);
width: 100%;
margin: 0;
}
nav:hover ul {
display: block;
}
.page2 {
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.wrap {
display: inline;
}
.card {
margin: 0 auto;
float: none;
}
.logo_footer {
visibility: hidden;
}
#img-logo {
max-width: 100%;
min-width: 300px;
height: auto;
}
.page_footer ul {
display: flex;
justify-content: center;
}
.page2 h1 {
margin: 10px;
}
}