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?
Related
I'm building a site where the horizontal site submenu "sticks" just under the header as the user scrolls down. The site layout is like this:
[header]
[advert]
[submenu]
[content]
I'm using jquery to determine the submenu+content div position and then adding a class with position: fixed to lock it when it has moved up to cover the ad, and at that point the inner content div containing the site content continues to be scrollable. In Safari and Firefox this is a smooth transition; the user scrolls, the submenu locks, the scrolling continues seamlessly even though it's an inner div that's being scrolled.
In Firefox however, there's a 2-3 second pause when the submenu locks before the content div becomes scrollable again.
Can anyone suggest why, and how to overcome this?
Cheers
Situation: I've got an HTML page with multiple canvas elements on it. The canvas elements stretch the entire page (both vertically and horizontally), and there's no spacing between them.
Now I've got a problem on mobile devices, because if I touch-scroll over these canvas elements, the browser does not recognise this as a regular scroll event, leaving me unable to scroll the viewport at all.
Because the HTML page is taller than my viewport, I still want to be able to scroll to the bottom of the page, which I've now disabled. Any ideas to mitigate this effect are more than welcome.
You can see a demo of what I'm talking about # http://www.manuals.epaper-system.com/Tutorials/BXSLT4IndV6_220440/BXen/2014/20141115/BXEPen_v6_20141115_V220440.htm
Click on an article, then zoom in (to make the page taller than your viewport), close the article and try to scroll the page on your mobile browser while pinching on the PDF contents.
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.
On ipad there is a css declaration -webkit-overflow-scrolling:touch which provides fast bouncing scroll to any div with cliped content. But it has some differences against native ios scroll:
If it was never scrolled before (eg scrollTop property of parent div is 0) and one is trying to scroll it up, it doesn't bounce but scrolls a whole page up. Same situation for content scrolled to a very bottom and scrolling down.
If content insede scrollable container is smaller then container itself it doesn't bounce too but propogate scrolling to other elements up to the page instead.
Is there any way to make it behave exactly like the native ios scrolling, so touching the container will always scroll it but never the page.
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;}