1

我对 javascript 和一般编程非常陌生,并且试图使用 scrollIntoView() 函数无济于事。

我在移动 Android Chrome 和三星 Internet 中测试了以下代码,它工作正常,但在移动 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();
}
4

1 回答 1

1

根据您的 iOS 版本,您可以通过将布尔参数传递给 scrollIntoView 而不是平滑行为选项来使其工作。

Element.scrollIntoView(true);

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

于 2021-01-15T11:49:09.957 回答