为什么滚动行为对我的 phone 不起作用？

Question

我在 CSS 中添加了 滚动行为 属性，但它仅适用于 google chrome 工具这让我可以像在 phone 上一样查看我的网站。当我在实际 phone 上加载我的网站时，没有滑动效果。有什么想法吗？

代码如下所示：

function scrollToSection(event) {
    if (supportsSmoothScrolling()) {
      return;
    }
    event.preventDefault();
    const scrollToElem = document.getElementById("section");
    SmoothVerticalScrolling(scrollToElem, 300, "top");
  }
  
  function supportsSmoothScrolling() {
    const body = document.body;
    const scrollSave = body.style.scrollBehavior;
    body.style.scrollBehavior = 'smooth';
    const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
    body.style.scrollBehavior = scrollSave;
    return hasSmooth;
  };
   
  function SmoothVerticalScrolling(element, time, position) {
    var eTop = element.getBoundingClientRect().top;
    var eAmt = eTop / 100;
    var curTime = 0;
    while (curTime <= time) {
      window.setTimeout(SVS_B, curTime, eAmt, position);
      curTime += time / 100;
    }
  }
  
  function SVS_B(eAmt, position) {
    if (position == "center" || position == "")
    window.scrollBy(0, eAmt / 2);
    if (position == "top")
    window.scrollBy(0, eAmt);
  }

html, body {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid h-100 nopadding">
    <div class="row h-100 nopadding">
        <div class="col-lg-8 black nopadding text-center d-flex flex-column justify-content-center">
            <a onclick="scrollToSection(event)" href="#more" class="more">Here is the button</a>
        </div>

        <div id="more"
            class="col-lg-4 white nopadding text-center d-flex flex-column align-self-center justify-content-center">
            Here is the section
        </div>
    </div>
</div>

我没有添加所有页面元素，但箭头代表代码中的锚标记：

Answer 1

如您所见，Safari 不支持滚动行为 CSS 属性（参见 this). You'd need some JavaScript to achieve the same effect across different browsers. You may find an example 。

更新： 这是 (which combines the answers of and ).

的工作代码片段

function scrollToSection(event) {
  if (supportsSmoothScrolling()) {
    return;
  }
  event.preventDefault();
  const scrollToElem = document.getElementById("section");
  SmoothVerticalScrolling(scrollToElem, 300, "top");
}

function supportsSmoothScrolling() {
  const body = document.body;
  const scrollSave = body.style.scrollBehavior;
  body.style.scrollBehavior = 'smooth';
  const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
  body.style.scrollBehavior = scrollSave;
  return hasSmooth;
};
 
function SmoothVerticalScrolling(element, time, position) {
  var eTop = element.getBoundingClientRect().top;
  var eAmt = eTop / 100;
  var curTime = 0;
  while (curTime <= time) {
    window.setTimeout(SVS_B, curTime, eAmt, position);
    curTime += time / 100;
  }
}

function SVS_B(eAmt, position) {
  if (position == "center" || position == "")
  window.scrollBy(0, eAmt / 2);
  if (position == "top")
  window.scrollBy(0, eAmt);
}

body {
  scroll-behavior: smooth;
  height: 1000px;
}
section {
  margin-top: 500px;
}

<a onclick="scrollToSection(event)" href="#section">
    Redirect On section
</a>
  
<section id="section">
  Section Content
</section>

为什么滚动行为对我的 phone 不起作用？

Why is scroll-behavior not working on my phone?

html

css

anchor