2021 年更新

Question

我正在研究单页组合，可使用href的顶部安装的导航栏进行导航。我在脑袋的CSS中使用了scroll-behavior: smooth;，这在使用chrome浏览器时使浏览变得顺畅而愉快。当使用Safari加载网站时，此行为会丢失，而是改为导航。是否有Safari等效于此CSS功能？

Answer 1

根据elmcrest的评论，它有效。

<script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>

Answer 2

Safari不支持scroll-behavior: smooth，您需要一些自定义javascript才能达到相同的效果。看到这个：Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari

Answer 3

尽管这里说野生动物园支持平滑滚动 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior，但即使是示例也无法在野生动物园中使用

作为一种解决方法，我找到了一个带有polyfills的库，并且在无法正常工作的浏览器中将其替换-https://github.com/iamdustan/smoothscroll

Answer 4

2021 年更新

Safari 仍然不支持平滑滚动，但如果您正在寻找一种简单的方法来启用它，您可以查看我过去 3 年一直在构建的 API：{ {3}}.
它非常快速且易于使用并且它可以在基本上每个浏览器上实现平滑滚动（目前不支持 IE）具有高定制度（缓和、持续时间、可中断性）等...).

您将在下面找到如何使用 API 在您的网站上快速启用平滑滚动的示例：

function init() {
  /** 
   * This API function, enables the anchors' 
   * smooth-scrolling to the corresponding section
   */
  uss.hrefSetup();  
  
  /** 
   * This version would prevent the stop-and-go effect you have when 
   * you click the same anchor more than one time.
   */
  //uss.hrefSetup(null, null, () => {return !uss.isScrolling(window);});
  
  /**
   * This API function, sets the easing of the window to a
   * medium speed(the "QUART" part) ease-in-out function that last exactly 1 second.
   */
   uss.setStepLengthCalculator(
      EASE_IN_OUT_QUART(1000), 
      window //window is optional because it's the default value
   ); 
   
   /**
    * This API function allow us to stop the scrolling on a container.
    * In this case, we don't want any more scrolling 
    * if the user scrolls the document with the mousewheel.
    */
    window.addEventListener(
          "wheel", 
          () => uss.stopScrolling(window) //window is optional because it's the default value
    ); 
}

/* Just styling, none of this is necessary for the API */
html, body {
  margin: 0;
}

nav {
  display: flex;
  justify-content: center;
  position: fixed;
  margin-top: 0;
  width: 100vw;
}

nav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  height: 20vh;
  width: 15vw;
  background: rgba(20,20,20,0.5);
  transition: all 0.3s;
}

nav > a:hover {
  background: rgba(20,20,20,0.6);
}

.horizontal-container {
  display:flex;
}

.page {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

#to1 {
  background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}


#to2 {
  background: linear-gradient(225deg, rgba(121,9,9,1) 0%, rgba(255,42,0,1) 100%);
}


#to3 {
  background: linear-gradient(45deg, rgba(227,176,7,1) 0%, rgba(255,239,0,1) 100%);
}


#to4 {
  background: linear-gradient(315deg, rgba(7,101,6,1) 0%, rgba(0,255,98,1) 100%);
}

<html>
  <head>
    <!-- We include the API -->
    <script src = "https://raw.githack.com/CristianDavideConte/universalSmoothScroll/master/js/universalsmoothscroll-min.js"></script>
    <!-- We include the API's easing library (this is optional) -->
    <script src = "https://raw.githack.com/CristianDavideConte/universalSmoothScroll/master/js/universalsmoothscroll-ease-functions-min.js"></script>
  </head>
  <body onload="init()"> <!-- Better to call JS when the elements are loaded -->
    <nav> <!-- header -->
      <a href="#to1"><p>Blue</p></a>
      <a href="#to2"><p>Red</p></a>
      <a href="#to3"><p>Yellow</p></a>
      <a href="#to4"><p>Green</p></a>
    </nav>
    <!-- Website pages -->
    <div class="horizontal-container">
      <div id="to1" class="page"></div>
      <div id="to2" class="page"></div>
    </div>
    <div class="horizontal-container">
      <div id="to3" class="page"></div>
      <div id="to4" class="page"></div>
    </div>
  </body>
</html>

可以在以下位置找到更多用法示例：https://github.com/CristianDavideConte/universalSmoothScroll 和 myWebPage 或 thisDemo。

Answer 5

您可以使用-webkit-overflow-scrolling: touch;。不需要javascript。

参考：https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

编辑：正如我指出的那样，我误解了这个问题（感谢您的评论）。对于Safari中的滚动行为，没有替代。您必须使用JavaScript。这是一种香草的解决方案：

https://perishablepress.com/vanilla-javascript-scroll-anchor/

是否有与Safari等效的滚动行为：平滑；？

5 个答案:

2021 年更新