I'm using the scrollto jquery plugin (http://trevordavis.net/blog/jquery-one-page-navigation-plugin).
It's a single-page website that scrolls horizontally. But there is also a page with larger content, so that page scrolls vertically. As you can see in this example: http://www.seegermattijs.be/!/ When you go from 'projecten' to 'seeger', the vertical scrollbar also slides, and this is not what I want (if you can't see the scrollbar, resize your browserscreen).
Can anybody help me out?
Thanks a lot!
Put the overflow-x: hidden;overflow-y: auto; to the wrapper, not to the child elements.
Related
On the XS breakpoint, the div I am using Bootstrap's collapse feature on is full screen and has enough content that it requires a scroll. I want to disable the rest of the website from scrolling when this is expanded. I have tried overflow:auto on the div and overflow: hidden on the body but it doesn't seem to do anything.
Is this possible to have scrolling enabled on the div when its expanded and have the body scrolling disabled?
Edit: Figured it out. Thanks to everyone that jumped in to help!
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 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 am using idangerous vertical swiper of two slides in a mobile app using jquery mobile. I need a vertical scroll bar in second slide as I have grid in it, but both as the slide height is fixed I am unable to achieve it. I have a thought that swiper event and scrolling event will be collided. I have tried in lot of ways but couldn't break this.
Thanks,
E. Ramesh Babu
So are you looking for something like this?
CSS:
.swiper-slide:nth-child(2) {
overflow-y: scroll;
}
It should be a simple as that.
DEMO HERE
And here is making it vertical
DEMO HERE
on mobile devices, you should use
e.stopPropagation();
on the element you want to scroll on touchstart event
Since adding a slide-in menu to my web page the rest of the page doesn't seem to be able to scroll to remaining content at the bottom of the page? This is more noticeable if you resize the browser to make the height smaller.
http://handmade-nation.com/dev/v3/shop.html
I think the reason is down to the fixed position and 100% height on the #right div but if this is removed it knocks out the menu so I need help working around this is possible?
Thanks!
Add overflow:auto in your #right it solved the issue for me in my browser.