1

That's pretty much the question. I have search everywhere online, but I cannot find any implementation of the css scroll-snap-stop: always written in pure javascript.

I do not want to use the css property because not all browsers respect it (let alone older browsers).

Does any one have any sample code around that does something similar? I do not know where to look or how to start.

Here is an example of I working here https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop

It forces the user to stop at each section

[EDIT] -- I basically want the same functionality of what scroll-snap-stop: always does without using it. There should be no css, just pure javascript that mimics that same css behavior.

I need pure javascript instead of css because not all browsers honour the scroll-snap-stop: always css property. So I wanted to code a javascript alternative that does the same thing.

swift nub
  • 2,747
  • 3
  • 17
  • 39
  • I added as an answer, and expanded it. – ctrl-alt-delor Sep 19 '22 at 19:27
  • Have you tried a one of the JS scripts that attempts to upgrade older browsers. It will allow you to just do it right, and it will magically work. So long as the script writer figured out how to upgrade this feature. The only one I remember was called something like `ie5.js` (sorry I not done any public web-design for a while). see https://stackoverflow.com/questions/6599815/what-is-the-difference-between-a-shim-and-a-polyfill – ctrl-alt-delor Sep 19 '22 at 19:44

2 Answers2

0
  • Do the mode switch in JS, or even a pure HTML button.
  • Do the style in CSS.

Use JavaScript to change the class of the element. And use CSS to style the two classes.

This method is style independent.

ctrl-alt-delor
  • 7,506
  • 5
  • 40
  • 52
  • sorry, I think my question wasn't too clear. I basically want the same functionality of what `scroll-snap-stop: always` does without using it. There should be no css, just pure javascript that mimics that same css behavior – swift nub Sep 19 '22 at 19:28
  • Why? Are you manipulating a canvas? Or is it a school assignment? Or other? Update your question to make it clear. – ctrl-alt-delor Sep 19 '22 at 19:31
  • I have updated the question above. It is not a school project. I just need something that's compatible with all browsers. – swift nub Sep 19 '22 at 19:35
0

Say you have a list of items that overflow (with ul being its overflowing container):

  • ul
    • li
    • li
    • li

When the page loads, you set all list items to display none, except for the first two. You set the second one to 1px width and set the first one to its normal width. When the second one enters the viewport (intersection observer) you expand the second one to its normal width. You then also set the third one to 1px width and set it to display block. When the first one leaves the viewport (intersection observer) you set the width of that one to 1px... etc. This should mimic the CSS rule.

You could code this... and it would perform absolutely great... but I would not do it. Browser compatibility of 'scroll-snap-stop: always' is fine: https://caniuse.com/?search=scroll%20snap

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • scroll-snap-stop is there yes, but the `always` parameter doesnt work on chrome -> https://bugs.chromium.org/p/chromium/issues/detail?id=823998&q=scroll-snap-stop&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified – swift nub Sep 19 '22 at 20:50
  • I'll try what you have said. – swift nub Sep 19 '22 at 20:51
  • Looking at https://bugs.chromium.org/p/chromium/issues/detail?id=1250229, people seem to argue that is not a bug, but another kind of behaviour. I tend to agree that it is a bug. – Mr. Hugo Sep 20 '22 at 14:48
  • yes, but that's the thing. This bug has been around for many years. So I cannot depend on the css property. Which is was I was wondering if there was a pure javascript way too do it. I am having difficulty with the method you mentioned. – swift nub Sep 21 '22 at 13:25
  • The internet is broken and that is okay. Browsers have bugs and things fail. The only thing you should look for is graceful degredation. You do not have to fix the internet (yourself). You can always detect a swipe and fake the scroll if you think the proposed solution is too difficult. – Mr. Hugo Sep 25 '22 at 19:52