Some websites currently break functionality by placing overflow:hidden style into html and body tags to bully users into having lots of unwanted garbage displayed. As a user, how can i best override that?
Only talking about those two tags, where a site controlling overflow is nearly always doing so maliciously.
you could alter that from your browser's dev tools like inspect
You can use Devtools or try make or Found some plugin who change the overflow:hidden in browser or you can use Python i think.
Try putting an overflow-y: visible !important; in the body & html tags, that's to keep the y-axis with a scrolling functionality.
And if you don't want scrolling sideways on phones and tablets then add as well overflow-x: hidden; to both the body & html tags alonside with a position: relative; for the body tag, too
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
I have several elements with overflow: auto. It works nice. On macOS, scrollbars are automatically hidden when the user is not scrolling and appear on scroll.
On windows and on any browsers scrollbars are always visible. It makes an ugly rendering.
So how can I auto hide scrollbars on every OS and every browser when the user is not scrolling?
I know there is a lot of similar question but I haven't found a suitable answer
I found something ! I've never thought it could be so simple :
.my-elem {
overflow: hidden
}
.my-elem:hover {
overflow: auto
}
perfect-scrollbar is a
Minimalistic but perfect custom scrollbar plugin
It works with almost every web browser, including Internet Explorer.
<style type="text/css">
body {
overflow:hidden;
}
</style>
The code above hides both horizontal and vertical scrollbar.
Since every browser has its own default ‘user agent’ stylesheet, you may have to do a CSS Reset that resets the styling of all HTML elements to a consistent baseline. Then your HTML will appear the same on all browsers.
You can also Normalize. Normalize.css preserves useful defaults rather than "unstyling" everything.
I am trying to figure it out why my website is scrolling horizontally on small devices. I have tried to change a lot of css, but still, nothing happens. Would you please have a look at this My website
I guess you can inspect my code. If it is something wrong, let me now
If you don't want any overflow-x in your page you can hide all overflow in the x direction on the html body for a quick solution.
If at any place inside the body you want a overflow-x just add the css style
overflow-x:auto; to that element with some defined max-width property.
To solve the issue try adding overflow-x: hidden; css to the body.
body{
overflow-x: hidden;
}
I checked the site on multiple sized devices and browsers and it all looks fine.
Be sure you are not looking at a cached version of the CSS, which will make you think that your CSS changes are not having an effect!
See here:
Stylesheet not updating
I have a website will have a background that is the full size of the screen. Because of cross-browser limitations, some of them like to keep a scroll bar even if the image is about the exact size of the screen. Is it possible for me to just remove the scroll bars?
In case you couldn't tell, I'm working with HTML, CSS, and JavaScript :)
body {
overflow: hidden;
}
and for ie 7
html {
overflow: hidden;
}
Try property:
overflow:hidden;
See also:
http://www.w3schools.com/Css/pr_pos_overflow.asp
Make sure your image is applied via the body tag, and if that does not work make sure it is applied to the html tag both of these tags via the Cascading Style Sheet file for example.
body {
background: url("image-src");
overflow: hidden;
}`
html {
background: url("image-src");
overflow: hidden;
}
Also remember to try and have the background image be of reasonable height and width.
Hope this helps.
Try adding html {overflow:auto;} to your CSS declarations. Auto overflow only gives the element the scroll bars it needs, even none at all. In the case of the disabled vertical scroll bar in IE, using auto overflow will remove it if it isn't needed.
This works a little better than using hidden overflow because you're declaring it on html or body. If your browser window becomes smaller than, not only your image but, your content you won't have any scroll bars with hidden overflow. As #Marc B said in a comment, removing user interface components to enforce a design is generally considered bad design.
You can read more about the overflow property here. From the site:
IE Trick
IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice > for preventing horizontal jumps, but isn't always desirable. To remove this in IE, you can > set overflow to auto on the body element.
Is there anyway to style, modify, or remove the scrollbars of a scrollable html div?
I believe your only option is to remove the scrollbars altogether with CSS.
#your_div {
overflow: hidden;
}
The scrollbars themselves are a "browser thing", and as such can't be styled.
EDIT: If you are willing to use "fake" scrollbars--i.e., they aren't actual browser scrollbars they're an HTML element created with Javascript/jQuery that work "like" scrollbars--then you can use Jscrollpane.
The scrolling looks surprisingly smooth and nice, but I would worry some about how it might work in more novel environments--i.e., a touchscreen interface.
Demos of JScrollpane.
There are IE only scrollbar CSS styles:
scrollbar-3dlight-color,
scrollbar-arrow-color,
scrollbar-base-color,
scrollbar-darkshadow-color,
scrollbar-face-color,
scrollbar-highlight-color,
scrollbar-shadow-color
Scrollbars can be styled, either by using css:
Scrollbar styleing with css
And/Or with javascript:
Scrollbar styleing with javascript
10 jQuery Custom Scrollbar Plugins