Detecting the end (drop) of a Scrollbar Event - javascript

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?

Related

Method of Achieving sliding images effect on window scroll

I am attempting to recreate something similar to the pencil effect on:
http://www.fiftythree.com/pencil
Not exactly but similar. About halfway down the current page, the pencil sort of pulls apart with a description on each part as the user scrolls down the window.
I am attempting to use the jquery .animate function to pull multiple div's apart in the same fashion.
IE: (image1) behind that (image2) behind that (image3).
Sort of a vertical accordion effect.
I am basing everything off scrollTop variable. And at certain points it will move the div's in a different fashion. All the events are contained in this loop.
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// doing stuff
}
My issue is that the scrolling function is not executing fast enough. If I scroll slowly it works, if I scroll quickly it sort of tries to play catch up and is either off location or too jerky.
Do you all think this is a decent way to achieve this effect, and if so - any suggestions on setting the refresh time to check for where the user has scrolled on the page?

Stopping jquery animate. Building a Carousel

Im learning javascript and jquery and im trying to create my own carousel.
The current problem i have stumbled over is the following. When the user stop scrolling in the carousel, i have a function that runs and centers my targeted Carousel item to my desired point. I have illustrated this with a black line in my fiddle. Here is my function that centers that item:
jQuery.fn.CenterToPoint = function(){
return this.each(function(){
Offset = $(this).offset().left;
Width = $(this).width();
Illuminate_Point = 0.45 * $(window).width();
ScrollLeft = Illuminate_Point - (Offset+Width/2);
$Container.animate({scrollLeft: "-=" + ScrollLeft},450);
});
}
However, i want the user to be able to scroll even though the animation is running. How can i kill this animation when its running but the user either clicks, mousescroll or trackpad is used on my carousel?
Here is my jFiddle:
http://jsfiddle.net/ptp05jvo/
From what I understand, your problem are:
The box is twitching after the it reach to desired point (black line).
When animating (box moving towards the black line), user input will cause box to 'jump'. In this case, you would want user input to override animating scrolling.
I didn't solve the whole problem, but here's what I've got so far: http://jsfiddle.net/ptp05jvo/3/
I managed to stop the first problem (twitching) by adding the following option in .animate().
always: function() {
clearTimeout($Container.data('scrollTimeout'));
isSystemScroll = false;
}
When you animate with .animate() to scroll, jQuery scroll the element and it's considered as actually scrolling, so .scroll() event is triggered. This can be good / bad.
In your carousel case, it's sort of bad because you .CenterToPoint() is called within .scroll() event which means it will be called every time jQuery animate the box to center.
This is what causing the twitching problem. The .CenterToPoint() keeps getting called within `.scroll()' event. So, the option I added will stop this.
To separate the concern, I added new jQuery function, scrollStopped to handle scrolling stopped event.
There is also a new variable called isSystemScroll that I introduced to the code. The idea is to recognize whether the scroll is coming from user / animation. With this, we can prioritize user input to override animation scroll.
However, user input can be anything, keyboard arrow, mouse wheel scroll, mouse click on scroll bar, etc. In my example, I only handle keyboard arrow input which is shown in the following code:
$(document).keyup(function () {
isSystemScroll = false;
console.log("key up");
});
Obviously, you can add additional check to only capture left / right arrow keys instead of all keys.
This sort of solve the 2nd problem. But you still need to handle other user inputs, esp mouse moving scroll bar.
From the test, I found that Firefox render the animation better and smoother. In Firefox, user input with keyboard arrow will override animation perfectly. The transition is smooth between the two. However, in Chrome, there's a little bit lag / jump.
Also, in Chrome, horizontal scroll bar doesn't show up while in Firefox, it does.
It's worth to mention that Firefox doesn't show twitching problem. I can't be sure if this is caused by the CSS you have. I didn't modify your CSS.
I came across couple carousel library and did the same test to see how they handle the issue.
Owl Carousel
http://owlgraphic.com/owlcarousel/demos/custom.html
Only allows dragging input. Other user inputs are disabled (scroll bar, keyboard arrow, etc). However, if you try to drag the carousel (in Chrome browser) while it's animating, you will see same jump / lag problem. Again, Firefox shows better and smoother animation with this library.
Slick
http://kenwheeler.github.io/slick/
The 'autoplay' option prevents user input when carousel is animating. No scroll bar and you can only move with keyboard arrow.
Conclusion
As a conclusion from this long answer, few things you can do if you want to build your own carousel:
Limit user input, only allows certain input.
Disable scroll bar.
Or, you can use existing library out there.

How to trigger jScrollPane scroll to bottom event

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

Two-fingered scroll js on touchpad

We have developed a site whcih has a horizontal orientation and are wanting to implement touchpad control with two fingers move left/right.
When you move two fingers left/right on touchpad, the site page is being scrolled left/right. Now we have implemented touchpad control with two fingers move up/down and page scrolled left/right.
How can we change touchpad control with two fingers move from up/down to left/right to scroll site page left/right using js or jQuery?
I may be a little late but had the same question before I stumbled over this question.
A little further investigation lead me to think that the best bet to capture trackpad scrolling would be the wheel event.
function doScroll(e) {
// positive deltas are top and left
// down and right are negative
// horizontal offset e.deltaX
// vertical offset e.deltaY
console.log(`x:${e.deltaX} y:${e.deltaY}`);
e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);
I have prepared a fiddle that tells you the scroll direction and offset values but prevents the scrolling itself.
The wheel event has a delta property that (at least in Chrome) is sensitive to momentum and gives you the current relative scroll offset rather than the absolute scroll position available in the scroll event.
Usually when you want to take over touch events in script, you add something like this to prevent the usual scroll and zoom:
$("body").bind("touchstart", function(e) {
e.preventDefault();
})
What you need to do is change what can be scrolled. If your page is big enough where left/right scrolling makes sense, the browser will allow it be scrolled that way.
Basically, if you only want them scrolling in a certain direction, only make content in that direction. If necessary, you can achieve this by having a container div of the specific size you want with overflow set to none.

Determine scroll move

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.

Categories