如何从scrollIntoViewOptions回退以与Safari兼容

Question

我有一个onclick可以触发这个函数：

function thread2M() {

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

它将页面滚动到一个特定的像素(div(并居中。当然，scrollIntoViewOptions在Safari中不起作用，所以我想回到scrollInto View((或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，则运行另一个脚本。

感谢您的回答。

Answer 1

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

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的日志，你可以用"alert"代替"console.log"，屏幕上会弹出消息。(

第二个不起作用，因为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
}

然后用if (testSupportsSmoothScroll())替换螺纹2M中的if测试。请注意，如果没有scrollIntoViewOptions，我还无法在浏览器上测试这些功能，但它似乎在chrome/ff上有效。

最后，您可以尝试使用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的脚本，但这还不错。