javascript - scrollIntoView() not working on IOS safari and chrome? - Stack Overflow

admin管理员组

文章数量:1336185

I'm super new to javascript and programming in general, and am attempting to use the scrollIntoView() function to no avail.

I tested the below code in mobile Android Chrome and Samsung Internet and it works fine, but in mobile IOS Chrome and Safari it doesn't

When I press any of the navigation links in the horizontal scrolling menu, the scroller moves all the way to the end towards the 'Help' link and it highlights it as well. (it does go to the correct page though, see picture example below)

Image of What I mean

Does scrollIntoView() work in IOS (Iphone 6 version and above) always or am I doing something wrong with the way I'm using it?

HTML

<div id="navScroller" class="scrollmenu scroll example hide-on-desktop">
    <a id="dairyy" class="btn2" href="">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();
}

I'm super new to javascript and programming in general, and am attempting to use the scrollIntoView() function to no avail.

I tested the below code in mobile Android Chrome and Samsung Internet and it works fine, but in mobile IOS Chrome and Safari it doesn't

When I press any of the navigation links in the horizontal scrolling menu, the scroller moves all the way to the end towards the 'Help' link and it highlights it as well. (it does go to the correct page though, see picture example below)

Image of What I mean

Does scrollIntoView() work in IOS (Iphone 6 version and above) always or am I doing something wrong with the way I'm using it?

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();
}

• javascript
• html
• css
• js-scrollintoview

Share Follow asked Apr 3, 2020 at 18:21 DomDom 2111 gold badge11 silver badge44 bronze badges 2

• I think is not avaiable: caniuse./#search=scrollIntoView – nanquim Commented Apr 4, 2020 at 15:28
• stackoverflow./a/62823201/14824067 – LuckyLuke Skywalker Commented Apr 26, 2022 at 16:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

On older iOS versions, uou can get it to work by passing a boolean parameter into scrollIntoView but not the smooth behavior option.

Element.scrollIntoView(true);

According to caniuse, more recent versions (16+) offer full support for scrollIntoView. However, some users report needing to use a polyfill to get smooth behavior, as of Nov 2022.

https://caniuse./?search=scrollIntoView

I just had this same problem, the auto scroll was working everywhere except IOS on both chrome and safari. The strange part was that the scrollIntoView was working in some parts of the code but not in others, i tried adding the boolean:

element.scrollIntoView(true)

and with an object like:

element.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });

what finally worked for me was adding a small timeout, I've noticed that that was the only difference between the working and the not working parts of the code:

setTimeout(() => {
  element.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
}, 10);

My guess is that by adding the timeout you remove some sort of conflict between the auto resize of the Iframe made by Iphones and the scroll.

Hope it's helpful!

本文标签： javascriptscrollIntoView() not working on IOS safari and chromeStack Overflow