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!
Related
I'm creating my website responsive for mobile except when I open the menu I see the scrollbar on top of the menu pop out and I can still scroll on the body that's behind the menu. I would like to hide the scrollbar and prevent the body from scrolling when the menu is open. I've seen examples how to do this with jQuery but is there a way to do it with just plain JavaScript or even css? I've also tried using z-index on the menu but that doesn't work either. Thanks in advance!
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.
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!
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'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.