2

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();
}
Dom
  • 21
  • 1
  • 4

1 Answers1

2

Depending on your iOS version, You can get it to work by passing a boolean parameter into scrollIntoView but not the smooth behavior option.

Element.scrollIntoView(true);

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

Adebisi OLUWABUKUNMI
  • 21
  • 2