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.
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 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 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.
I want to display an <iframe> in my site, but I want the site that I am displaying to only be scrollable. All other events should be disabled.
So that the container of the <iframe>, the <iframe> has a width and height of 100%, behaves as if it has nothing inside it.
Almost like it is a scrollable screenshot of the site. So on hover and on click inside the <iframe> don't work.
The reason I am doing this is that the container of the <iframe> needs to be draggable, but can't be dragged as all events on the <iframe> are being registered within the <iframe>.
How can I do this in javascript and / or jQuery?
Can I apply a .preventDefault() to everything except scrolling?
You could overlay a div with opacity: 0 (meaning it's fully transparent). That div will intercept most events, such as onclick.
You can then add a mousedown listener to that div which will initiate the 'drag'. The iframe then moves with the transparent div.
This will also disable scrolling though, but maybe you can mirror a scroll event from the div to the iframe .. will be tricky.
Set up a clear div on top of it, if you can use CSS, set the opacity to zero, and set the z-index to 1 on the div, and to -1 on the iframe. Doing that should make the div receive the mousedown events. You could also do document.getElementById("id").onclick=function(){} and make nothing happen on them
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.