0

CSS snap scroll works well, but when I use it on iOS, I cannot alternate between "scrollIntoView" and allowing the user to scroll with snap. If the user has already scrolled, scrollIntoView will not be able to change the scroll in iOS. Any solutions?

obs: works in Mac, in Safari, but not in iOS, neither Safari or Chrome

calebmiranda
  • 156
  • 13

1 Answers1

0

I kind of solved it. Worked around, really.

The first thing I did was to separate my style tag in the header in two, for we will need to rewrite it later.

the first was like this:

<style>
    html {
      scroll-snap-type: y mandatory;
}
  </style>

and the second had all the usual styles.

Now, when I need to do scroll into view, my function does the following:

function scrollToID ( id ) {
    document.getElementsByTagName('style')[0].innerHTML="html {scroll-snap-type: initial;}";
    document.getElementById(id).scrollIntoView({
      behavior: "smooth",
    });
    var protoresnap = setTimeout(resnap,500)
}

and of course I also have the resnap function:

function resnap () {
    document.getElementsByTagName('style')[0].innerHTML="html {scroll-snap-type: y mandatory;}";
  }

It's the only way I found to do the workaround. The problem seems to be that the snap position is saved in the system. When you remove the "scroll-snap-type", wait 500ms and then restore it, it seems to be enough to clear it. 100ms was not being time enough, that's why 500ms.

calebmiranda
  • 156
  • 13