Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

This adds horizontal scrollbar in responsive mode #3

Open
PibbzTV opened this issue Dec 14, 2022 · 6 comments
Open

This adds horizontal scrollbar in responsive mode #3

PibbzTV opened this issue Dec 14, 2022 · 6 comments
Labels
troubleshooting

Comments

@PibbzTV
Copy link

PibbzTV commented Dec 14, 2022

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?
@hyperstown
Copy link
Owner

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:

image

(Screen with overflow-x disabled)

@PibbzTV
Copy link
Author

PibbzTV commented Dec 14, 2022

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

@hyperstown
Copy link
Owner

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.

@hyperstown
Copy link
Owner

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.

@PibbzTV
Copy link
Author

PibbzTV commented Dec 15, 2022

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 :(

@hyperstown
Copy link
Owner

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
troubleshooting
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@PibbzTV @hyperstown