scrollIntoView()不适用于IOS safari和chrome

Question

我对javascript和编程非常陌生，我试图使用scrollIntoView((函数，但没有成功。

我在移动Android Chrome和三星互联网上测试了以下代码，它运行良好，但在移动IOS Chrome和Safari中它没有

当我按下水平滚动菜单中的任何导航链接时，滚动条会一直移动到"帮助"链接的末尾，并将其高亮显示。(不过它确实转到了正确的页面，请参阅下面的图片示例(

图片

scrollIntoView((在IOS(Iphone 6及以上版本(中始终有效吗？还是我的使用方式有问题

HTML

<div id="navScroller" class="scrollmenu scroll example hide-on-desktop">
<a id="dairyy" class="btn2" href="https://www.gourmetdirect.co/collections/dairy">dairy</a>
</div>

CSS

.activeA {
//Places a red line underneath the link and makes the text white and bold.
border-bottom: 3px solid red;
font-weight: bold;
color: white;
}

Javascript

//Getting the url of the window
var url = window.location.href;
//Removing protocols
var urlNoProtocol = url.replace(/^https?:///i, "");
//if current page url is the same as the url of the specific product category page, set 'activeA' class which highlights the link
if ( urlNoProtocol == "www.gourmetdirect.co/collections/seafood") {
var element = document.getElementById("seafoodd");
function myFunction() {
var element = document.getElementById("seafoodd");
element.classList.remove("activeA");
element.classList.add("activeA");
element.scrollIntoViewIfNeeded();
};
myFunction();
}

Answer 1

在旧的iOS版本上，uou可以通过将布尔参数传递到scrollIntoView而不是平滑行为选项来使其工作。

Element.scrollIntoView(true);

根据犬科动物的说法，最近的版本(16+(提供了对scrollIntoView的全面支持。然而，一些用户报告称，截至2022年11月，需要使用polyfill来获得流畅的行为。

https://caniuse.com/?search=scrollIntoView