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();
});
Related
I have two divs with the total height of the viewport and a button for scrolling from one to another with ScrollTo jquery plugin. The problem is that I want to prevent the posibility of manual scroll.
I want that when someone scrolls with mouse down, the browser scroll automatically to the second view, and when I scroll to top gets the previous view.
I don't know if I'm explaining well, here an example: http://orangina.eu/heritage
Try to scroll in this webpage, this is what I need.
Thanks!
Correct me if I'm wrong but it looks to me like you're trying to disable the browsers default scrolling behaviour, attach events to scroll up and scroll down and scroll up or down to the height of the page's height.
The way I would do this is disable the browser's default scrolling behaviour with overflow:hidden to the body and html.
Then you can bind the jQuery "mousewheel" and "DOMMouseScroll" to the div checking for "event.originalEvent.detail > 0" or "e.originalEvent.wheelDelta < 0" for down scrolling or else for scrolling up.
Finally add your function call inside the if or else depending on the downscroll or upscroll.
I can write the code if you want but it might help you more if you try this yourself.
You can achieve that same effect by using fullPage.js plugin for jQuery.
Compatible with old browsers such as IE 8.
Touch devices compatible
CSS3 animations improving performance
Lots of options, callbacks and methods.
Thanks for all replies!
I solved my problem, instead of using standard scrolling I used the translateY css property. Setting a data-id to each page layer and doing translateY(100%, 200%, 300%...) every time I want to scroll down/up.
I'm trying for numerous days to solve the following issue.
I have a menu located on the top of the page which needed to be open using swipedown event (I'm using Hammer.js jQuery version).
Problem is, every time I try to interact using swipes I either scroll the page (swipeup) or pulling the page down same as described in the following question.
Here is what I've tried so far:
overflow: hidden; on the body element with an inner container with overflow: auto, swipe on top element still triggered document scroll.
Setting preventDefault on the document also disabled lower elements events in the DOM hierarchy and by that I had no swipe events working in the page.
Also tried using stopPropagation on the actual element when the event occurs, to prevent the bubbling up the chain for the event, the result cause the object to not respond to the events (swipes) and document scroll worked with no problems.
Any ideas how can I still keep page scroll but also when using common gestures, such as swipedown/swipeup, on specific elements that the element only will be affected?
Here is an example using JSFiddle, to better demonstrate the issue.
Would appreciate ideas/thoughts
I don't know if this will help, but I've always liked to use drag more than swipe. Using Hammer on my projects, swipes were a bit finicky. And from a UX standpoint, drag feels instantaneous vs a swipe. Much like, mousedown vs mouseup/click. So in instances where it's appropriate, and I believe in the case of showing swipey menu it is, I'd opt for drag.
Replacing your example with drag rather than swipe, and also using CSS transition, -webkit-transition, rather than jQuery's animate (drag will trigger like a mousemove, vs a click or a mouseup) seemed to make it work.
Hammer('.nav').on('dragdown', function(e){
e.gesture.preventDefault()
$(".blue").html("down")
$('.nav').css({"top":"0px"});
})
.on('dragup', function(e){
e.gesture.preventDefault()
$(".blue").html("dragup")
$('.nav').css({"top":"-150px"});
});
//Added in CSS, for .nav
.nav {-webkit-transition:0.5s top;}
Example
This does still have the page overscroll. A preventDefault() on document.ontouchstart would could fix that but that breaks scrolling. You might be able to do a selective preventDefault() by checking the scrollOffset perhaps. But I guess in the long run, I'd recommend something like iScroll.
Example
Also maybe tweak the hitbox for the drag to be a bit larger. Which I did in the last example. I attached the dragdown event on the document instead of the "menu" so the menu doesn't have to be visibly bigger.
Hammer(document).on("dragdown",function(e){
//calculate ratio of first touch from top
var pos=e.gesture.startEvent.center.pageY/window.innerHeight
if(pos<0.2){ //drag occurs in the first 20% of the screen
menu.style.marginTop="0px" //or animate here
e.gesture.preventDefault()
e.gesture.stopPropagation();
}
})
You should use the preventDefault function of the orginal gesture, to stop the browsers default behaviour, see here: https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults
When you have a div element, on which you want to register swipe events, you would do the following:
$('#swipeDiv').hammer().on("swipe", function(ev) { ev.gesture.preventDefault(); });
That should prevent the scrolling of the page, but only if the swipe happens on the div element.
I am using jquery.slimscroll to replace browser's native scrollbar.
I found sometimes using it causes browser's native scrollbar not responsive to mouse scroll.
One such case:
used along with jqueryui sortable on a element.
Somehow, after rerendering the element, the browser scrollbar stop working.
I can consistently reproduce this in every browser, and I write a jsfiddle to reproduce it:
Fiddle
function rerender(){
$("#wrapper").html($("#content").html());
$("#container").sortable({axis:"y",stop:function(){
rerender();
}});
$("#container").slimScroll(
{railVisible:true, height:"70px",start:"bottom"});
};
rerender();
It happens in other occasions, so this issue may not be related to jqueryui sortable.
Does anyone see similar problems, and how did you solve it?
I think the problem is in a way slimScroll handle wheel event - it's attached to window element, so when you recreate your wrapper html, you removes previous scrollable element, but mouse wheel handler remains and prevents window from scrolling. So, in theory you have to destroy custom scrollbar before updating wrapper html, then reinit scrollbar. But in practice slimScroll does not have destroy method.
There is a lot of other scrollbar plugins you can try: jQuery Scrollbar, jScrollPane, Malihu Custom Scrollbar and others... You can compare their functionality here
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).