I have searched a lot, but couldnt find any thing that could help me. I need a javascript event that fires when the scrollbar has reached near bottom. I remember with out jScrollPane i used to do it with binding scroll event of the div and inside the event it does some calculation with scrolltop and height etc to see if the scrolling has been done to/near bottom. I cant find any similar thing in Jscrollpane's scroll bar. I found a couple of similar questions, but they were in Java.
there is a page describing those events here
$('.scroll-pane').
bind('jsp-scroll-y', function(event, scrollPositionY, isAtTop, isAtBottom) {
// some basic math here
});
Related
The Expected Behavior
I am trying to incorporate basic swipe functionality for a slideshow of content. I swipe in either direction an it moves nicely to the next/previous slide. The slides do not move when at either end and swiping can continue from there.
The Problem
When swiping, I am receiving the following error in my log after the slides move correctly:
"Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."
I also find that when I reach the end of my slides and try to slide into the stopped direction again, the error triggers. But when I try to then swipe back into the correct position, the swipe functionality no longer works. It's as if the window is expecting the slides to animate but nothing is, which then prevents any additional functionality from triggering.
I have found no information on this error and have tried numerous debugging attempts and solution ideas but have had no luck yet. Any advice on this would be greatly appreciated. Thank you.
function swipeleftHandler(event) {
changeInnerScene('left',true);
}
function swiperightHandler(event) {
changeInnerScene('right',true);
}
$(".frame-three").on({"swipeleft": swipeleftHandler, "swiperight": swiperightHandler});
I have a very similar use case, presenting the same bug. I have been reading about Chrome's throtled assynchronous touchmove events, and I thought that canceling the event at touchstart woudl fix it, but it didn't.
I am guessing that your element has its position set as absolute or fixed, am I right?
Changed it to relative and see if it works. In my case, it did.
I need to detect when a user has stopped scrolling only in the Scrollbar.
There is this site: http://beoplay.com/Products/BeoplayA9, that is already doing what I need.
I need to readjust page position if user has scrolled (with the scroll bar) and left the scroll between two pages. Notice that in the example website the page position is only readjusted at the 'drop' of the scroll bar.
This question has been asked many times, but not this way, I've already seen this plugin by James Padolsey, but it doesn't work as the example website.
I have some code already in a jsfiddle: http://jsfiddle.net/promatik/7rkGV/
The handling of the mouse wheel is done, but now I can't figure out how to handle the scroll bar move to know when it was dropped.
Maybe there is a away to differentiate the event from a wheel scroll and a scroll bar scroll.
$(window).on('scroll', function (event) {
console.log(event);
});
Does anyone know how to replicate the effect in the example?
I am working on a jquery ui website and have a draggable accordion div that experiences an odd behavior with the mouse sticking only to the scroll bars.
$("#item_accordion").draggable();
This behavior seems to only occur in Google Chrome which is stranger yet. I can eventually get the mouse to let go of the accordion by doing a right-click and moving the mouse quickly. I was curious if anyone have experience, and hopefully solutions, with this isse.
Thanks so much,
Derek
I've had the same issue. Unfortunately I don't know what's causing it since I didn't want to dig too much into JQuery but I was able to work around it by specifying a "handle" for my draggable object. The "handle" is the only place where a drag can be initiated and since my "handle" didn't contain a scrollbar I no longer had this issue.
$('#overlays_dialog').draggable({handle: '.dialog-header'});
overlays_dialog is a div containing a child div with a class of '.dialog-header'.
Good day. I got an HTML page which is small and has no scroll bar. However i need to determine when and what direction scroller was moved. So i need to determine scroll button on my mouse is moving.
How can i do it?
Check out the jQuery Mousewheel plugin. Then you can simply bind an event to any element to check if the wheel was used while the mouse was over it.
$('body').mousewheel(function(delta){
// Do stuff
});
Note that it's not too user friendly to not have a scrollbar and rely only on the mousewheel. There are other ways people expect to be able to scroll, like the arrow keys for example.
is it possible to capture a click event on a scrollbar? I have some code where i am observing the click and mousedown events on the document. However, it seems that when I click on the scrollbar, the event is not captured. This leads me to believe that the scrollbars aren't really part of the document. (Assumption :-)) Is this a correct assumption? What is the right way to do this so that the behaviour is consistent across all major browsers?
sample code
document.observe('click', function(evt){
//do something
//blah blah blah
});
Thanks
Correct. The closest you can get is the scroll event. It'll work on every element that has a scrollbar, and it will fire on both mouse scroll with scroll bar, scroll wheel, arrow keys, page up/down, etc. Here's a brief jQuery example.
jQuery(document).scroll(function () {
console.log("foo")
});
That's the best suggestion I can give you - I can't imagine any other uses for a scroll bar click event.