Question

我遵循这个例子

https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior

但它不起作用，页面重新加载。我只需要滚动，而不是重新加载。

实际上我想将所有正文滚动到某个id项目。

// html5

<nav>
  <a href="#page-1" rel='no-refresh' >1</a>
  <a href="#page-2" rel='no-refresh' >2</a>
  <a href="#page-3" rel='no-refresh' >3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1" >1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

// css3

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

Answer 1

此功能目前仅受Firefox 36完全支持。 Internet Explorer或Safari都不支持此功能。

要使其适用于Chrome或Opera，您需要进入浏览器设置并启用“平滑滚动”或“启用实验性网络平台功能”标记。

备注：您链接的页面包含有关浏览器兼容性的信息以供将来参考。由于浏览器缺乏实现，此代码不应用于生产环境。

如果您想在生产环境中添加平滑滚动，我建议您暂时使用基于javascript的实现。

css3而不是页面重新加载而滚动

1 个答案: