Question

我检查了将https://codepen.io/indylogix/pen/jjKOQx正文使用缩放CSS时平滑滚动无法正常工作的情况

body{zoom:0.9}

Answer 1

在这种情况下，您不需要JS，请在下面进行尝试：

html, body {
  margin: 0;
  padding: 0;
  zoom:.9;
  scroll-behavior: smooth;
} 
* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  background: #333;
  margin: 0;
  padding: 15px;
  list-style: none;
  border-radius: 0 0 10px 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

#nav a {
  display: block;
  padding: 10px 10px;
  color: #fff;
}

#nav a:hover {
  color: #ff0;
}

.section {
  height: 1000px;
  padding: 30px 140px;
}

#section-1 {
  background: #eee;
}

#section-2 {
  background: #ddd;
}

#section-3 {
  background: #ccc;
}

h1 {
  margin: 0 0 20px 0;
}

.section a {
  color: #3399FF;
}

<ul id="nav">
  <li><a href="#section-1" class="js-anchor-link">Section 1</a></li>
  <li><a href="#section-2" class="js-anchor-link">Section 2</a></li>
  <li><a href="#section-3" class="js-anchor-link">Section 3</a></li>
</ul>

<div id="section-1" class="section">
  <h1>Section 1</h1>
  <a href="#section-2" class="js-anchor-link">Go to section 2</a>
</div>

<div id="section-2" class="section">
  <h1>Section 2</h1>
  <a href="#section-3" class="js-anchor-link">Go to section 3</a>
</div>

<div id="section-3" class="section">
  <h1>Section 3</h1>
  <a href="#section-1" class="js-anchor-link">Back to section 1</a>
</div>

缩放css用于身体后，平滑滚动无法正常工作

1 个答案: