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!
Related
I'm currently working on my very first personal page! I'm getting horizontal scroll on smaller media queries where I shouldn't and I cant track down the culprit. All containers are set to 100% width and have their overflow-x hidden. Once the page reaches 1200px in width the side navigation collapses, however once you toggle the 'hamburger' the menu should slide out and push the contents of the main section out and hide the overflow until an anchor point is selected in the menu. At which point the page should shift back to where it was and scroll to the desired section. Something I didnt notice until I turned on touch simulation in the dev tools is that its completely busted on mobile with touch, however working fine with browser scroll in mobile view.
If anyone has any thoughts please let me know, you can find my site here: https://imaleks.dev/
Sorry in advance if this breaks any ettiquite new to all this.
I think, when all you containers are width: 100% + translateX(290px);, and this is more then 100%. You should toggle some class to a body with overflow-x: hidden; when the mobile menu is active.
Or you can keep overflow-x: hidden; for body permanent. This will completely disable horizontal scroll.
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 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
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.
I have a Div Overflow prepended to the body container wrapper, when its triggered this prepend, I wish all the scroll made by the mouse scroll work only in the div overflow which has width: 60% of the window. so I wish anywhere I scroll only work in the div overflow, because the way that it is right now, when you reach the maximum scroll in the div, it starts to scroll the body in the background and also if I put my mouse outside of the div overflow it also scrolls the body in the background. what do I do to help this? I'm using JQuery library.
Another thing is that I would like to add an eventListener when the scroll of that div reach some height, it does something, call a javascript function for example.
Is it all possible? if Yes, how? Thank you guys in advance.
Try adding overflow:hidden to body. The browser will automatically add scroll if its content reachees beyond its boundaries.