I'm having a problem with overscrolling a div in mobile safari. I have a nested structure with body { position: fixed }, inside which I have a parent and a child div. The container div has: .container { overflow-y: scroll; -webkit-overflow-scrolling: touch; } and a max-height property that is set dynamically by javaScript.
When I overscroll the container in mobile safari beyond the content of the child-div (kicking in the 'overscroll' or 'elastic / rubber-band' scroll effect, I get all kinds of jitters, as shown here:
I've scoured SO and every other resource I could find but to no avail. One piece of info I feel is likely relevant:
If i disable scrolling on the element, I can drag the screen as if I was attempting to scroll and sometimes I can get the bottom of child content to disappear and reveal the background of the container div of about ~40px on iPhone. It's roughly the size of the control bar at the bottom, but appears ABOVE the control bar.
I also read in a deeply buried comment that there was once a bug with safari triggering resize events on scroll, but I've set event listeners to alert if a resize event is triggered to test, and haven't gotten that to occur.
I'm lost as to what to search for to remedy this. Ideas on what is causing this?
Note: FWIW, this is being built in React with create-react-app.
I have a requirement to add a scroll bar that is always visible and which can be directly used by mouse or touch to scroll the contents of a large ListView.
The normal way of scrolling on mobile devices is by swiping up or down. During the scroll process there will be a small scrollbar visible but that scrollbar disappears and even while visible it can't be used to do any actual scrolling.
After much searching I could not find what I needed.
So my question is: Is there a way to make the scrollbar in the ListView fully usable or should I disable it and create a separate scrollbar which I will need to keep in sync. If so how?
For a functional example of something I would be working with see: https://fiddle.sencha.com/#fiddle/124j
I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you
I am developing a Windows 8 app with HTML5 and Javascript.
I decided to use a FlipView. My template for this consists of several div which contains the HTML.
Everything works except for one thing, my div containing the HTML I added the option overflow: scroll, the scrollbar appears, but my problem is that I can not scroll that pressing the ScrollBar. Unable to retrieve mousewheel event.
What is the solution to successfully scroll (horizontal scroll) also with the mouse wheel? (No worries for browsing with your finger).
I solved this problem by using the event to wheel up mousewheel.
Does a div element not have an onscroll event handler?
The behaviour on my page doesn't seem to indicate the div onscroll event handler is recognized.
<div id='bd' onscroll='alert("Scroll Called");'></div>
Also,
Do div scroll events roll up to window scroll events, as per DOM event bubbling ?
Depending on which version of HTML you're using, you could use the onwheel event, instead.
The onscroll event works only if all the following are true:
The div has overflow: auto, overflow: scroll, overflow-y: scroll, etc.
The div currently has a visible scrollbar that can scroll.
The mouse movement actually causes the scrollbar to scroll.
So the onscroll event is not really suited for detecting general mouse wheel movement.
Please note that the onwheel event is new in HTML 5. According to w3schools, it is pretty widely supported, though.
I scratched my head on this one too, until I started learning more about DOCTYPE directives. The onscroll attribute is not supported in most recent version of the HTML spec. It'll show as invalid syntax in Visual Studio. It might work in many browsers, but it's still invalid code.
Instead, you canan event using Javascript or jQuery. I use an approach like this to synchronize scrolling on two separate div's:
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});
Yes but the element needs to have a scrollbar. You can give it one with either overflow: auto (which gives you a scrollbar when the content is tall enough) or overflow: scroll. (These can be set specifically for x & y as well overflow-y: scroll...)
Although they don't bubble once the div has been scrolled to the bottom the window will start scrolling. (Basically if the div can scroll it will intercept the scroll event, but if it can't then it will go to the page)
I know it may not be exactly what you're looking for, but a lot of javascript frameworks can help you with this. It is not necessary for the div to have a scrollbar for you to hook to the scroll events.
Eg. Mootools has the mousewheel event. Demo here. (It has scrollbars, but you can use Firebug to remove the scrollbars and try -- it still works).
I have used this myself on a site I made a while back. If you scroll while holding your mouse over the images it prevents the default page scrolling and instead slides the image-bar.
JQUERY scroll() can help you.
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});