I've got an iframe on my page linking to another page. That one contains a div with a fixed height and overflow:scroll, which works just fine--but when I keep scrolling with the mouse or pad, it scrolls down to the end of the div and then starts to scroll the page--which is annoying.
How can I disable full page scrolling when the mouse is hovering over that div/ the whole iframe?
Thanks!
You can set body {position:fixed} when hovering and then return that to body {position: static;}
Related
Main page with buttons and content which is have scroll to the page, click on one of the buttons on right side.
Full page cover or half page cover popup open.
After closing popup tried to scroll the page but unable to do it and content hiding behind / white page shows.
expecting screen 1 as its with scrolling.
You can try this CSS:
body{
-webkit-overflow-scrolling: touch;
}
I have a page that, when loading, displays a vertical scroll bar that disappears once the page has finished loading. Is there any way to trace this?
Use Overflow:hidden on your maindiv.
Means just make body style overflow-y:hidden
and on hover on body just change the style to overflow-y:scroll;
I'm developing responsive web site for small devices. I need to show popup (pure div) and make possible vertical scroll due large content. But instead scrolling my popup main page scrolled.
My question is how could I disable main page scroll and scroll only popup?
You can set height of your .popup and then set overflow to auto
.popup{
height:50px;
overflow:auto;
}
Now, if your popup has a large contents that doesn't fit in 50 pixels by height and you'll scroll on it, contents in popup will be scrolled instead of whole document contents.
I have a simple position:fixed sidebar out of the way of page elements. The page scrolls fine, but when I mouse over the fixed sidebar, the page can no longer scroll. Could someone explain why this happens? and how to fix this?
This happens because only the part you hover over scrolls. For example if you create an element with "overflow: scroll", when you over over this element, it will scroll and not the whole page. Same thing is happening over here.
I need to hide a div when someone is scrolling the page. And also show the div when stop scrolling.
Is it possible to do this for touch screen application with HTML5 or jQuery?