Javascript 如何从scrollIntoViewOptions中回退以与Safari兼容？

我有一个触发此函数的onclick：

 function thread2M() {
        
  var elmnt = document.getElementById("scroll2");
  elmnt.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});

}

它将页面滚动到特定像素（div）并使其居中。当然，scrollIntoViewOptions在Safari中不起作用，所以我想回到scrollIntoView（）或scrollTo（）

我试过：

function thread2M() { 
    var elmnt = document.getElementById("scroll2");
    try {
        elmnt.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
}    catch {
        elmnt.scrollIntoView(true);
}
}

及

但没有启动滚动。我甚至不知道JS是如何工作的，所以答案可能与基本原理有关，但我找不到解决方案。我想我只需要测试scrollIntoViewOptions是否有效，如果为真，运行一个脚本，如果为假，运行另一个脚本

---

感谢您的回答。

第一次尝试看起来是可行的。尝试在控制台中查看发生了什么：

function thread2M() { 
    var elmnt = document.getElementById("scroll2");
    try {
        console.log("Calling scrollIntoView");
        elmnt.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
    }    catch (error) {
        console.log("Error scrolling: " + error.message);
        elmnt.scrollIntoView(true);
    }
}

（如果找不到safari的日志，可以将“console.log”替换为“alert”，屏幕上将弹出消息。）

第二个不起作用，因为Safari有一个scrollIntoView功能；它只是不接受其他浏览器那样的选项参数

你还可以尝试其他三种选择。第一个是检查CSS scrollbehavior属性的存在性（这不是完全相同的事情，但高度相关）：

或者您可以尝试使用getter覆盖scrollIntoViewOptions的行为。（使用此功能测试scrollTo支持，归功于）。在thread2M函数上方，尝试添加以下内容：

function testSupportsSmoothScroll () {
  var supports = false
  try {
    var div = document.createElement('div')
    div.scrollIntoView({
      get behavior () {
        supports = true
        return 'smooth'
      }
    })
  } catch (err) {}
  return supports
}

然后将thread2M中的if测试替换为

if（testSupportsSmoothScroll（））

。请注意，在没有scrollIntoViewOptions的浏览器上，我还无法测试这些功能，但在chrome/ff上似乎确实可以

最后，您可以尝试使用polyfill脚本，它（希望）能够检测并消除浏览器差异。我自己从来没有试过，但你可以试试。在标题中导入脚本：

<script src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.0.0/dist/es5/seamless.js"></script>

虽然使用这种方法，您确实需要加载另一个32KB的脚本，但这并不坏

function testSupportsSmoothScroll () {
  var supports = false
  try {
    var div = document.createElement('div')
    div.scrollIntoView({
      get behavior () {
        supports = true
        return 'smooth'
      }
    })
  } catch (err) {}
  return supports
}

<script src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.0.0/dist/es5/seamless.js"></script>

function thread2M() { 
    var elmnt = document.getElementById("scroll2");
    seamless.elementScrollIntoView(elmnt, {behavior: "smooth", block: "center", inline: "center"});
}