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;.
Related
I have a situation where when child scroll reaches bottom parent scroll takes over and starts scrolling the whole screen.
Basicall I have normal icon page with a horizontal bar at top. When user clicks on top bar a div slid downs showing the list of items covering whole screen except top bar. Because this list is loner than the screen height I have allowed vertical scrolling in div. Now the problem is when the user is scrolling inside div and reaches the bottom of the list, the background page starts scrolling up.
What I want is, inside the div scrolling should not scroll the background/parent page when user reaches bottom of the list.
code sample (in browser you will need to move mouse a bit after reaching bottom)
https://stackblitz.com/edit/ionic-forum-5-jhl2pw
Thanks
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
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
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?