CODEWITHSUNDEEP
cssscroll-snap
calebmiranda
calebmiranda

Reputation: 166

CSS snap scroll problem with scrollIntoView

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

Upvotes: 1

Views: 617

Answers (2)

Wojciech Grabowski
Wojciech Grabowski

Reputation: 1

Just smooth scrolling takes some time, which is in your example longer than 100ms and shorter than 500ms. You need to re-enable snap scroll when scroll is finished, so instead of timeout use scrollend event callback to set snap scroll back.

Upvotes: 0

calebmiranda
calebmiranda

Reputation: 166

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.

Upvotes: 0

Related Questions