2

我有一个触发此功能的 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);
}
}

和

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

  else {window.scrollTo(782, 280);}
 
}

但没有启动滚动。我什至没有 JS 如何工作的基本知识，所以答案可能与基础有关，但我无法找到解决方案。我想我只需要测试 scrollIntoViewOptions 是否有效，如果为 true，则运行一个脚本，如果为 false，则运行另一个脚本。

答案赞赏，谢谢。

4

1 回答 1

0

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

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 属性的存在（这不是完全相同的东西，但高度相关）：

function thread2M() { 
    var elmnt = document.getElementById("scroll2");
    if('scrollBehavior' in document.documentElement.style) {
        elmnt.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
    } else {
        elmnt.scrollIntoView(true);
    }
}

或者您可以尝试使用 getter 来覆盖 scrollIntoViewOptions 的行为。（感谢 nlawson使用它来测试 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 脚本，该脚本将（希望）检测并消除浏览器差异。我自己从未尝试过，但您可以尝试无缝滚动 polyfill。在标题中导入脚本：

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

然后像这样修改thread2M：

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

尽管使用这种方法确实需要加载另一个 32KB 的脚本，但这还不错。

于 2020-10-27T03:39:11.203 回答