So, in my html file I have a div that has huge width and height. Vertically it is shown full, so you need to scroll down the whole page. But horizontally only half is shown, so on the bottom of this div we have a scrollbar that allows to ride over this div without scrolling the whole page left or right.
And the problem is that the scrollbar itself is just placed at the bottom of the div, but I want it to be fixed to the bottom of the screen, so I could scroll this div to the left and to the right without going down at first.
Is there any possibility to do this, using CSS, jQuery or whatever?
What i understand your question
If you don't need Vertical scroll then simple write and your horizontal scroll display only when your page page content wider than page...
overflow-y: hidden;
overflow-x: auto;
You can User overflow rule in css.
Vertical Scrolling : overflow-y : hidden
Horizontal Scrolling : overflow-x : hidden
Related
I have a webpage which is split into two panels which has scrollbars for each panel. For the left panel I have a left scroll bar and for the right panel I have a right scrollbar.
When I hover on the left panel and scroll, the moment the content of left panel is ended, the body of the right div is scrolling.
Is there any way we can stop that, I mean to stop scrolling the right panel content when I hover on left panel?
I tried the below suggestions but they didn't work.
https://css-tricks.com/forums/topic/prevent-body-scrolling-when-the-user-scrolls-on-fixed-position-div/
Freeze body scroll when hover a div
Well you could split your whole page into 2 sections, left and right. Set the width of both to whatever percentage you want and the height to 100% and add vertical scrollbars with overflow-y: auto;.
I want to remove the outer dialog scroll bar and make a section inside the dialog scrollable. I was able to remove the outer dialog scroll bar by setting overflow:visible on the dialog but i tried to put overflow:hidden on the div I want scrollable inside the dialog but it did not work. It actually cuts off the div till the dialog runs out of height. Any suggestions?
**EDIT**
JSFIDDLE
https://jsfiddle.net/3Lqthfqg/14/
In the fiddle i want to freeze the top section and scroll the bottom half of the section. I label which section i want to freeze and which area i want to be scrollable. Overflow is auto in the fiddle example just so
Set a fixed height and set overflow-y to auto for the div you want to be scrollable.
<div style="height: 100px; overflow-y: auto">
jsfiddle
The overflow style defaults to visible, which means the content will not be clipped and may be rendered outside the content box. If you set it to auto, the browser will clip the content and add scrollbars when needed. If you want the scrollbars even when they are not needed, set it to scroll.
I have a div with with the following css:
.long-table-container {
overflow-x: auto;
}
Instead of attaching scrollbars to .long-table-container, I would like to instead use the browser's scrollbars to do the job. Is this possible?
The reason I need to do this is because I have a long table in .long-table-container and the only way to scroll left and right is by scrolling all the way to the bottom of the page and then moving horizontal scroller of .long-table-container which is a pain for any user.
Fiddle: http://jsfiddle.net/ox5qzp1x/
You can create additional scrollable element with fixed position at bottom of the page and connect these two elements, like in question Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
Is it possible to show horizontal scroll bar of div at top of div via javascript or CSS without jquery. By default it comes at bottom.
I goggled for it but did not got any help.
Try this Fiddle, it has scroll bars in top, This is based on How can I get horizontal scrollbars at top and bottom of a div?