pure-snow.js This adds horizontal scrollbar in responsive mode

Greetings,

Whenever I add this, it adds a slight horizontal scroll to the website, and I cannot figure out why. I can see it on the demo aswell https://hyperstown.github.io/puresnowjs/

Any idea as to why this happens?

Dec 14 '22 13:12 PibbzTV

Hi, <body> tag has CSS property overflow-x: hidden. This property ensures that scrollbar will stay hidden even if some elements are overflowing. Have you altered in anyway way attached CSS? I would also recommend you to check if you don't overwrite that property in some other file? If issue also occurs on the demo page then perhaps one of installed extensions is causing this problem. I've tested on both Chromium and Firefox, mobile and desktop, and it works fine.

You can check in Firefox what element is causing overflow in inspector:

(Screen with overflow-x disabled)

Dec 14 '22 19:12 hyperstown

This is true, the scrollbar is hidden, but it's still possible to do a horizontal scroll by tilting the mousewheel on PC or pulling the edges on mobile. This possibility disappears when the script is unloaded for some reason :o

Dec 14 '22 20:12 PibbzTV

Then perhaps overflow-x: clip could be a solution. As said in MDN docs:

Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context.

Dec 14 '22 20:12 hyperstown

This possibility disappears when the script is unloaded for some reason :o

That's because individual snowflakes are flowing outside screen border. When script is unloaded there is no element that could cause overflow.

Dec 14 '22 20:12 hyperstown

Then perhaps overflow-x: clip could be a solution. As said in MDN docs:

Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context.

Does not seem to solve the issue either, unfortunately :(

Dec 15 '22 18:12 PibbzTV

Then perhaps one of those solutions will work for you (You can also try using all of them ):

In index.html replace:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

with

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Additionally in pureSnow.js you can set max snowflake position like that:

let randomX = Math.random() * 90; // vw (90 vw instead of 100)

Yet another solution would be to set snow div as relative with max-width:


/* style.css | http://127.0.0.1:5500/style.css */

body {
  /* overflow-x: hidden; */
}

/* Element | http://127.0.0.1:5500/ */

#snow {
  overflow-x: clip;
  max-width: 100vw;
  position: relative;
}

Dec 15 '22 20:12 hyperstown