I have some jQuery that sets overflow:hidden to the html body while a modal is open. Works just fine on all desktop browsers.
However, this isn't working for mobile. From what I've read, overflow:hidden gets ignored by mobile browsers when it's within the body tag for some reason.
I've read that wrapping your content within a div and setting that overflow:hidden is a solution but it's not really one for me.
Any other ideas out there? Anyone else encounter this issue?
try
html, body {
overflow:hidden;
}
add position:relative; with overflow: hidden; and see if that works.
Related
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'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
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 am currently trying to apply the Scroll Bar webkit styling to a certain element however, with no luck. I have looked everywhere; There are 2 threads on Stack Overflow I have seen however, do not work.
Most of the threads say to use:
.class-name::-webkit-scrollbar { }
However I have had not luck with this
This is a full example of what people are reccomending (it doesnt work):
http://codepen.io/wrdle/pen/BQYBjN
If you help it is much appreciated! :)
Thanks
Your CSS works just fine - the problem in your CodePen is that the document is scrolling, not the #container element, so you don't see its scrollbar.
Add this CSS as an example to see the correct scrollbar:
#container {
height: 500px;
overflow: auto;
}
Updated CodePen: http://codepen.io/capitalq/pen/MbQgJv
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.