Scroll only responds to scroll wheel when directly over scrollbar - javascript

High level: What kind of things can prevent the mouse wheel from being interpreted properly for scrolling? What are some debugging tools to check these?
I have a section of my page that is correctly displaying a vertical scroll bar. However the scroll wheel on the mouse fails to scroll the section unless the mouse is directly over the scroll bar.
What I believe is the relevant div has overflow-x: hidden and overflow-y: auto.
These are coming from the Zurb Foundation Apps CSS. I have, unfortunately, been unable to replicate this behavior within jsfiddle, so I'm hoping for further investigative tips.

This appears to relate to Foundation Apps grid-block classes. If you have a grid-block which has a single child grid-block this can somehow prevent the scroll wheel working.
I ended up replacing the child grid-block with a raw, full-width div.

I found the problem was the grid-frame class, specifically setting the height as 100vh causes the scroll wheel to bug out.
I replaced the grid-frame with a grid-block and didn't use grid-frame at all.

Related

Mobile safari overscroll jumping abruptly

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.

Adding a functional Scrollbar to a ListView for users who don't like touch scrolling

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

Smooth JavaScript horizontal scroll in DIV

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

Unable to scroll with the mouse wheel in my flipview

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.

onscroll for div

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();
});

Categories

Resources