Menu
The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't know if the problem is actually with CSS or HTML.
I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working fine.
Part of my theme CSS file:
body {
color: #000;
font-family: 'Play', sans-serif;
font-size: 16px;
line-height: 25px;
background: #e0dbcd url('../images/bg.jpg');
letter-spacing:0.2px;
overflow: hidden;
}
670
It can be easily done by using the overflow property. The overflow property has different values. E.g., overflow: auto; and an axis hiding procedure like overflow-x: hidden; and overflow-y: auto; will make a bar scrollable vertically and horizontally, and the "auto" value will add only a vertically scrollable bar.
When the mouse won't scroll, there are two issues that most commonly cause it. The first is dust and dirt causing mechanical issues with the mouse wheel. The second is low battery issues on wireless mice. However, these aren't always the root cause.
In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow. The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.
remove overflow: hidden; from body in the bootstrap-theme.css file.
126
For someone who was in my scenario, this could be happening because of height: 100% for html, body in angular-material.css. Remove it and you're good to go.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
