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.
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.
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 need to do fixed content page and scrolling side bar. But content sometimes have height more than the browser windows. How scrolling sidebar but watch content on the left?
That is exactly what ..
CSS Positioning
.. was created for.
Try making the content fixed and the right div relative.
I just started using the Wookmark script and it's making my Tumblr theme overflow by also scrolling to the left when it should scroll vertically. This is what I have for now.
http://lt-neon.tumblr.com/
And the code is on this site.
http://pastebin.com/aZTpxX8C
Is there anyway I can solve this so that way my Tumblr theme scrolls vertically instead of horizontally?
Just to clarify, this issue isn't related to Wookmark. There are two elements on your page that are pushing the page width and creating the scroll.
The first is div#search. Remove left: 770px replace with float: right.
The second is #content. Again if you remove left: 150px the scroll disappears.
I am not 100% sure why your using left: to position elements, but this may be helpful: http://alistapart.com/article/css-positioning-101