Menu
I want to scroll to the far right edge of a page that is really wide (it's wide on purpose) when the user closes a modal (specifically, the Reveal modal in Foundation 4).
I've tried setting an id on a div that's aligned all the way right, but that obviously doesn't work.
789
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.
You can move the contents of windows that have horizontal scroll bars to the left or right using the keyboard and the mouse. Move contents to the right: Press the Shift key and scroll the mouse wheel up. Move contents to the left: Press the Shift key and scroll the mouse wheel down.
To scroll horizontally, you use scrollLeft().
$('body, html').scrollLeft(400);
jQuery also supports animating the scrollLeft property.
To scroll all the way to the right, you get the full width of the page, and subtract the window width to get the left edge :
var left = $(document).outerWidth() - $(window).width();
$('body, html').scrollLeft(left);
You actually can do it with a div ID. If you have a div like this:
<div id="divid" style="position: absolute; left: 9000px;">Far Right</div>
Then just change your location.hash to match:
location.hash = "divid";
The browser will take care of scrolling for you.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
