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
Related
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've got a fixed slide menu that appears only on mobiles , the problem I got is , when I touch scroll down the menu, all the body elements scrolls down too,I want to prevent body scrolling when touch scrolling the nav element, I tried many js codes but nothing, Help please.
PS: The Menu I want to scroll is inside the body, I dont want to prevent it from scrolling too
First thing would be make the menu big enough that it needs to be scrolled, so, let's say your menu wrapper has a height of 200px. The inner content should have more than 200px, at least.
After that you can add overflow-y: scroll; to your menu wrapper CSS selector.
If you face problems, http://iscrolljs.com should help you with that!
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 got a html page with a sliding panel on the right. This panel is 200px wide, position: fixed, and its position is initially set to right: -100px (halfway outside of the clientArea). Overflow-x is set to hidden for body, html (css), and the panel accepts mouseover events and drop events. On mouse over, the panel slides to right: 0.
If I drag a draggable element on this panel, the panel correctly slides to left, but the window starts to scroll to right, which is an unwanted behaviour.
I also tried a javascript solution as described here: Disable horizontal scroll with JavaScript
but is's a bad workaround because it make the clientArea start flickering.
What is the best way to completely disable horizontal scrolling? Possibly a cross browser solution.
Thanks
Update:
It's not the sliding panel causing the issue, but the helper object of the draggable element (I'm using jquery-ui), which is anchored to the mouse position at top left while dragging. Imagine the helper object as a div 200x100px. When dragged to the rightmost part of the window area, the issue shows up scrolling the window to the right, instead of clipping the helper (and not scroll the window). I sort of manage this by anchoring the mouse to the top right corner of the helper during the drag operation, but I'm still curious if there is any way to completely disable the horizontal scroll of the window. I supposed the helper object to be completely "detached" from the page flow (as happens using position: absolute in css), but apparently it's not.
I ended up changing my initial requirements and thus the page design.
And what if you do not place the panel at right: -100px, but give it a width of 100px and place it at right: 0px?
Then on mouseover animate the width to 200px. It still feels like a slide. I don't know if the content of your panel allows the change of the width, but maybe you can give the panel an overflow: hidden too.
i have a div 400px x 400px which contains text that i need to scroll. I would like to do it with control on a couple of arrow images (up and down). Can this be done with jquery? I also dont want a scroller off to the side of the div. just a couple up and down arrows under the div to control the scrolling of the content.
Any thoughts?
Thanks in advance.
This will be helpful: Scroll Position of div with "overflow: auto"
Don't even need to use jQuery.