I am trying to use jQuery to handle the scroling, so I want to get rid of the browser's scroll bar... how do I do that?
well with css you could do that -> overflow:hidden on the body tag but you will not be able to scroll down anymore if the page is larger then the browser screen (unless you use your keyboard arrows)
Use CSS: overflow:hidden; will disable the scroll-bars of the element.
Not certain whether it will work on the whole page (ie at the body level), but you can always wrap your content in a div and style that.
The way to prevent the browser scroll bar using jQuery is to keep your document height less than your window height. Meaning you would need a wrapping div and make sure your content never exceeds the window height.
$(document).height();
$(window).height();
Not sure what you are trying to accomplish though.
as others have suggested you can use the CSS property
body{
overflow: hidden;
}
The actual use case would need to be presented to find which way would be best.
For finer control over which scrollbar to show and hide you can also use overflow-x and overflow-y. Browser support is a bit tricky. You can check it with this testcase if there is a solution for only get rid of the vertical scrollbar in your case.
Related
I have a sidebar navigation menu with children and sub-children which appear on hover. Here is a jsfiddle link: https://jsfiddle.net/s096zfpd/
This is obviously heavily simplified just to give an idea of what I'm trying to accomplish. My issue is that sometimes the list within <nav> exceeds the height of <nav>. In this case, I want to be able to scroll within <nav>, but doing so would compromise the overflow-x:visible property which I need to display .sub-nav, since CSS simply doesn't allow the simultaneous use of overflow-x:visible and overflow-y:scroll.
I'm thinking that maybe a js solution could work well here. Any suggestions?
Thanks.
If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto It means that we can not apply visible and hidden to same DOM element, so ideal solution would be
To create a wrapper and then apply overflow-x and overflow-y to two different DOM elements. Sharing the js fiddle solution to your problem
https://jsfiddle.net/e2edvupc/
I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.
Things I've tried/considered:
always having scrollbar visible - it works but I don't like it.
setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.
Does anybody know a good technique for keeping the page container in place?
I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.
The correct answer is
html { width: 100vw; }
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I have noticed some unexpected (by me anyway) behavior when the following css is used:
body, html{height:100%; overflow-x:hidden}
When the page has more height than the screen, vertical scrollbars appear as expected and the scroll event is detectable on the body element (rather than the window). The trouble is that the window.pageOffsetY property is no longer reflecting the scrolled position. This is also affecting the pageY property of mouse events.
I have set up a fiddle http://jsfiddle.net/kevmc/n2sJB/ where you can see this in action.
Only when both body and html tags have the above styles does the problem arise. I know the simple answer is don't use those styles, but I am trying to write a javascript component that I can use on many sites where I do not always have control over the stylesheet.
So my question is how can I measure the scroll position when the above styles are in place?
As you have set height:100% for both html and body elements, body become scrollable (not html/window as it was before), so you should check scroll offset of body element: jQuery('body').scrollTop(); or try solution without jQuery from Engineer
I've used $('body').height($('body').height() + 1);.
I've written a web application and found that when I resize the page, the browser doesn't display it's own scrollbar as the window shrinks. This prevents the user from accessing content. I've set my body width to 500px and set the navbar to white-space:nowrap. How can I get the browser to recognize that there is content to the right of the screen?
Just to clarify I want the browser's scrollbar and not a scroll bar on any control.
You can use one of the following depending on whether you want horizontal, vertical, or both scrollbars to be added:
body {overflow-x:scroll;}
body {overflow-y:scroll;}
body {overflow:scroll;}
However, I think if you show the content in a section and then do
#id-of_your_div {overflow:scroll;}
So that you add scroll to the div rather than force the browser to show scrollbars, then your page will provide a much better user experience since such scrollbars are easier for users to access.
You can set the height or width of the body/element to 100.1% depending on which direction and element you want to have scrollable.
Instead of playing with the width, use the code that was intended for this purpose. The following CSS will force a scroll-bar to be present whether it's needed or not.
for both scroll-bars...
body {
overflow: scroll;
}
or just for a horizontal scroll-bar...
body {
overflow-x: scroll;
}