I need to respond to a user manually scrolling an element that has a scrollbar.
Unfortunately, the scroll event occurs on the same element in several different circumstances:
when the user scrolls the element (the only one I’m interested in);
when the user resizes the window and the element’s scroll position changes indirectly;
when the user changes the zoom of the page and the element’s scroll position changes indirectly;
when the code changes the element’s scrollTop position programmatically.
Is there any way to isolate only the first case and have a handler trigger only when the user actually literally scrolls the element?
I don't know if it is what you are looking for but, as said in this page, you can check the event.target to verify if your scroll is on the wanted element.
You can prevent the bubbling of the scroll event by preventDefault() as much as I can remember.So if you register the scroll event(j-query) on the control and prevent it's bubbling up to the other controls I think is gonna solve what you are looking for.
Related
I have some drag-and-drop elements on a page whose ondragstart function causes a child section to collapse, which is changing the height of the page, forcing an auto-scroll if the user is far enough down the page, which cancels the dragging, so the user has to try again. And worse, if the user happens to scroll back to the bottom and try dragging again, the whole process happens again.
Is there something I can put into my ondragstart (or maybe onmousedown?) function that prevents body resizing until onmouseup or something?
I suppose if this isn't possible, I'll have to figure out a way to have the draggable element's parent not resize...
I have a scrollable element (overflow-y: auto;) in my HTML.
However, when you put mouse over it and start to use mousewheel it's not scrolling unless you click inside of it.
The only workaround I found was to add tabindex="-1" attribute to make the element focusable and then call $element.focus() when mousewheel events occur. This works to a some degree. However, when element is focused already, the focus() will not do anything and the element become unscrollable until you click outside of it and then click inside of it again. Also, I don't like this workaround because it will draw a focus border around the element.
What actually controls what element on the page receives the scrolling? The weird thing is that I can see that my element actually receives the mousewheel events, but it's not scrolling for some reason.
SO, how do I make sure that element is scrollable by mousewheel when mouse pointer is over it?
I'm testig it in Google Chrome.
I am implementing a scrollbar using jQuery/Javascript/CSS. The usual. Everything is going according to plan except for the following use case:
The user mouses down in the scrollbar div hosting mousedown/mousemove/mouseup event handlers. The user initiates a drag gesture - mousemove starts firing - that soon moves the cursor outside the bounds of the scrollbar div and onto the surrounding div real estate on the web page. The moment this happens, mousemove - as expected - stops firing events.
How do I continue to have mousemove fire events without resorting to just attaching a mousemove handler to the root div? How do I maintain scrollbar dragger translation even though the cursor has wandered off the scrollbar?
Thanks,
Doug
Instead of using onmousemove on the element, use it on the document.
I have a div which is set to overflow:scroll;. I get scrollbars which is what I want. However when scrolling the div with the mousewheel it scrolls the rest of the page when it reaches the top or bottom of the div's content.
How can I scroll only the div or the entire page based on what's hovered ?
First I don't think you can override the scroll event. So here is what I would do. I don't know jquery but here is some straight javascript.
document.getElementById('scrollDiv').onmouseover=function(){
document.getElementByTagName('body')[0].style.overflow='hidden';
}
document.getElementById('scrollDiv').onmouseout=function(){
document.getElementByTagName('body')[0].style.overflow='';
}
Obviously you could tweak this a little, but this is the basic idea. Also, if you need to you could do other test cases. Like if the div has focus then do the same thing. Depends on your setup.
You could test the mouse position and cancel the scroll events for the document if the mouse is within the bounds of the div.
In this case, I think you'll have to override the default onscroll event for the body. In your handler, you'll need to manually scroll the div's contents.
this question is for an autocomplete drop down list I have to do that will fire while you're writing in an html textbox.
It basically consists of a div containing the suggestion elements, each of them being a div as well.
I got to the point where it's begining to work properly but now I added a vertical scroll to the containing div so you can limit the height of the drop down list, and I got the following behaviour:
If you use the scroll, it scrolls up or down in "pixels", so it cuts my elements making it all look anything but sleek.
I'd like to override the behaviour to go up and down one whole div element when you use the scroll. I don't even know how to google for this...
Anybody knows any useful resource about this or can give any tip as to where to start, if it's possible to override the scroll movement events or I should look into another direction?
Thanks a lot in advance
Note: I cannot use jquery autocomplete plugin.
You could implement your own scrollbar, using mouse events and updating positions manually.
Could you not tap into a 'scroll' event for that element (DOM 3 Events provides a scroll event for an element, not sure how supported it is), such that whenever the scroll position is changed, it calls a little routine of your own that adjusts the scroll position by rounding it to the nearest 'notch'?
Or, you could regularly poll for the scroll position and adjust it when it has moved. This scroll position seems fairly cross-browser.
First:
Using your own scroll bar, make a scroll event handler. Here you could use an animation by delta ( it is found in evt ) on which you can set the scrollTop of the element yourself by the offsetHeight of your top or bottom visible element. Also if the div height does cut off an element just make the previous or next element a bit "higher" aka set it's height to push the cut off element up or down.
Second:
You could "patch" the div so only a few elements would be visible. and while you scroll you hide the top one and display the bottom one in a animation, without using scrollTop or scrollHeight.
Watch out for scroll event in Firefox. It has another name, but you can test it like this:
eventName = eventName === 'mousewheel' ? ((/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : eventName) : eventName;
Good Luck. If you need any help in about 2 days i will have it implemented, because i need one too.
This simply cannot be done, there is no solution, period. One must live with this limitation.
Why is there no solution?
Because even if you implement your own scroll bar, you would still have to rely on scroll events, and these can be neither canceled nor prevented from bubbling to the body element. Really, they can't, you can call preventDefault() and stopPropagation() on them till the cows come home and they still bubble. This is a deliberate decision on the part of the standardizing body and browser implementors.
If scroll events were cancellable, EхpеrtEхchangе could prevent you from scrolling to the bottom of the page to see the answer ;) (don't worry, I used some Cyrillic letters in "EхpеrtEхchangе" so they don't get an indexable mention).