I have a DIV section with the css
#all_messages{
position:inherit;
overflow:auto;
height:100%;
width:100%;
}
I want to make it scroll inside the page which i did with the overflow but i don't want an extra scrollbar on the page, i would like native browser's scrollbar to control that not one scrollbar just for that section
Ok so in the picture you can see i have two scrollbars i want to remove the inner scrollbar and have it controlled by the browser's native scrollbar
I think what you want to do is make all the other elements on the page position:fixed. If the content in the remaining section overflows, the browser bar will appear automatically. You must also remove the overflow:auto property from that div, so that it won't create an inner scroll as well.
Use overflow: hidden. This will restrict it and not show any scroll bars.
Related
Hello stackoverflow users,
Today I am using the overflow:scroll; property so I can hide all content but allow users to see it with a scroll bar.
See below picture:
You can see that the scroll bars appear even when not needed. Is there a way I can hide the scroll bar until needed, ie when there is actually overflowing content. It is a cosmetic issue for me as the scroll bar at the moment are naturally locked since there is no overflowing content, so why display it (I would prefer it not to be displayed just in case others have different opinions).
Regards
You can use overflow:auto instead of overflow:scroll
With overflow:scroll http://jsfiddle.net/0wekc9p2/1/
with overflow:auto http://jsfiddle.net/0wekc9p2/2/
I would suggest you to set overflow property to auto. or remove the property altogether if it is not inherited.
In your CSS put this code within body tag
body {
overflow:hidden
}
I am using a facebook like button on my web page. I need it to align at the right side of the page. But there is a horizontal scroll bar displaying.
Please see the fiddle http://jsfiddle.net/u4kMs/
I couldn't find out what causes this. How to fix this?
to disable scroll, try something like;
.your_div_class{
overflow-x: hidden;
overflow-y: scroll;
}
The scrollbar appears because the content is too wide for your screen.
Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.
If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.
This would be the result: http://jsfiddle.net/poikl/u4kMs/8/
It's because the frame is too small for the width that you have set on the top div
<div style="margin-left:auto; margin-right:auto; width:980px;">
So when this is on your web page yo shouldn't get the horizontal scroller. If you do, then consider changing the above width
Try this and remember to put the "right-aligned" div before the left-aligned div, even the right div have to be "after" graphically speaking.
rtl has a problem most times, (with me special with
<body dir="{{(App::isLocale('ar') ? 'rtl' : 'ltr')}}">
in laravel and the only solution is
body{ overflow-x: hidden; } but be careful with inside element is fitted well
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/
I have a div that has a lot of content and hence scrolls.. How can I hide the scrollbar such that it is not visible. EDIT: I do want scrolling to work! So.. Scrolling with no scrollbar?
eg
.scrolling_div {
overflow:auto;
/*something else to hide the scrollbar?*/
}
Ok, I spent sometime to write minimal code.
Check DEMO. Mouse over the div and scroll to see the scroller.
Note that this using an external plugin to listen to mousewheel event.
DEMO page for the plugin
overflow:hidden should hide the scrollbar.
.scrolling_div {
overflow: hidden;
}
overflow can take any one of the below values,
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.Printers may print overflowing content.
auto
Provide scrollbars if content overflows.
Reference
overflow: auto; means "show a scrollbar if necessary". Change it to overflow: hidden; to disable scrolling.
EDIT: Okay, you want to make a custom scrollbar. Then see this sample jsFiddle for how to get started - it includes mouse wheeling and dragging of the scrollbar.
You can try this:
html {
overflow: hidden;
}
it will remove the scrollbar from all the window.
Otherwise if you need it only on a specific div:
.scrolling_div {
overflow: hidden;
}
Use a wrapper which covers the element you want to be scrollable without a scrollbar, and let the wrapper be narrower than the element to scroll, in the horizontal basis. This is what I mean: http://jsfiddle.net/FlagelloDiDio/EdgTt/
It really depends on what you are going for. see here
overflow:hidden; may be what you want.
If you want to dip into css3, you can play with overflow-x and overflow-y for even more options.
The only way to hide the scrollbar is to make the content non-scrollable and just cut off if it exceeds the height (overflow: hidden). Honestly, why would you want to have a page that is scrollable that doesn't have a scrollbar? That would confuse the heck out of any visitors. There's no way you can do this with CSS.
As far as customizing the scrollbar, there are JavaScripts out there to do that. But make sure that if the user has it disabled, they can still properly scroll the page without it.
I created an html page for facebook it's height is 650px and turned off Auto Scroll but it shows vertical scroll bar.
Just because the content fits within the standard canvas height doesn't necessarily mean that the scrollbars won't appear. The scrollbar will also appear if the width overflows the canvas (520px).
The following doesn't apply in your case but based on your title others may find it useful. The fan page canvas height can be changed by using the JavaScript SDK -- specifically FB.Canvas.setAutoGrow or FB.Canvas.setSize.
Add a selector too the fan page div.
<div id="myfanpage">
</div>
then add this css to your stylesheet:
#myfanpage{
margin:0;
padding:0;
overflow:hidden;
height:650px;
}
That will completely disable scrollbars and make your div exactly 650px in height!