I'm working on a project and I need to create a vertical carousel that works on scroll (mousewheel) I just need to know how can I handle the sliding on scroll.
I have a function called nextSlide when I call then it get the next slide.
I did something like this (I checked the direction and other stuff but I'm adding the simplest code snippet here)
Note: I did Debounce on my function but it didn't work
el.addEventListener('wheel', (event) => {
event.preventDefault();
nextSlide();
});
The problem here is the event firing on each mouse scroll I just need to handle it on one scroll here is an example from swiper
https://codepen.io/Seamni69/pen/vYgmqVd
What I meant by one scroll is calling the function just one time when scrolling, no matter how much scrolling is.
Created this. if wheelDeltaY is positive, you are scrolling down. If it's negative you are scrolling up.
window.addEventListener('wheel', throttle(scrollDirection, 500));
function scrollDirection(e) {
e.preventDefault();
e.wheelDeltaY > 0
? console.log("DOWN")
: console.log("UP")
e.stopImmediatePropagation();
};
function throttle(func, interval) {
let lastCall = 0;
return function() {
const now = Date.now();
if (lastCall + interval < now) {
lastCall = now;
return func.apply(this, arguments);
}
};
}
Related
I have a page that auto scrolls - the function scroll() below worked just fine.
I needed to add an on-hover function - which should pause the scrolling, giving the user control over the scroll.
I added some code to stop scrolling on-hover.
<script>
var theInterval;
function startScroll() {
theInterval = setInterval(scroll, 50);
}
function stopScroll() {
clearInterval(theInterval);
}
$(function () {
scroll();
$('#scrollDiv').hover(function () {
stopScroll();
}, function () {
startScroll();
})
});
function scroll() {
if (document.getElementById('scrollDiv').scrollTop < (document.getElementById('scrollDiv').scrollHeight - document.getElementById('scrollDiv').offsetHeight)) {
-1
document.getElementById('scrollDiv').scrollTop = document.getElementById('scrollDiv').scrollTop + 1
}
else { document.getElementById('scrollDiv').scrollTop = 0; }
}
setInterval(scroll, 50);
</script>
I expected that the extra functions would stop the scrolling when the user hovers over the content.
What happened was that the scrolling simply stopped
You are dropping the interval pointer from your initial call to scroll. setInterval returns an ID to the timer that is running the function at the specified cadence.
Your code is kicking off the scrolling on the last line, but not capturing this timer ID to clear -- so on 1st hover you clear a null pointer in theInterval, then on blur you're starting another timer calling scroll.
You probably notice that it gets faster because 2 logic paths are now adding 1px every 50 ms.
On the last line, you need to also set theInterval to keep track of that call, like:
theInterval = setInterval(scroll, 50)
That should fix it.
I have an element which I wish to stick to the top of the page when scrolling down. Functionally all of the code works thanks to another user on SO. However when scrolling down on the phone it seems that the sticky element lags behind by a bit. What I mean is the code seems to be calling every single time the parent element is scrolling and it causes hundreds or thousands of adjustments to the sticky element so it causes it to shake a bit.
Here is the code below:
HTML
<div id="scroller-wrapper">
<div id="scroller-anchor"></div>
<div id="scroller" class="row visible-xs-block meal-controls">
My sticky element is here and working
</div>
</div>
JS
$('#scroller-wrapper').scroll(function() {
var $anchor = $("#scroller-anchor");
var $scroller = $('#scroller');
var move = function() {
var st = $(window).scrollTop();
var ot = $anchor.offset().top;
if(st > ot) {
$scroller.addClass('fixedElement');
} else {
$scroller.removeClass('fixedElement');
}
};
$(window).scroll(move);
move();
});
CSS
.fixedElement {
position:fixed;
top:0;
right:0;
width:100%;
z-index:10000;
}
IMO, a possible and more effective solution would be to use position: sticky in CSS and not JS. You need to provide top: 0 as well. Some compatibility is lagging in IE, but it is a viable solution already. Worth to check it out here
If you are worried about old browsers you may add a fallback function in JS, which still be somewhat laggy
what you need to do is to throttle or debounce the call to update the element.
also why are you attaching a scroll listener to window inside of your wrapper scroll handler? that will mean that EVERY time that scroll listener is called, it will attach ANOTHER scroll listener to window.
all you need is the single handler on window, and allow propagation to do the rest.
// A debounce function wraps a function with a setTimeout,
// and then resets that timeout everytime it is called
function debounce(func, delay){
var timeout, that = this;
delay = delay || 300;
return function() {
if(timeout) clearTimeout(timeout)
timeout = setTimeout(function() {
return func.apply(that, arguments)
}, delay)
}
}
// a throttle function ensures that a function isn't
// called more than once every interval
function throttle(fn, interval, shouldDebounce){
var lastCall = 0, debouncedFn;
interval = interval || 300
if(shouldDebounce) debouncedFn = debounce(fn, interval);
return function(){
var now = (new Date()).getTime();
if(now - lastCall < interval)
return debouncedFn && debouncedFn.apply(this, arguments);
lastCall = now;
return fn.apply(this, arguments);
}
}
// create a function to set scroll listeners
function setScroller() {
var $anchor = $("#scroller-anchor"),
$scroller = $('#scroller'),
onMove = function onMove() {
var st = $(window).scrollTop(),
ot = $anchor.offset().top;
if(st > ot) {
$scroller.addClass('fixedElement');
} else {
$scroller.removeClass('fixedElement');
}
},
// Throttle the onMove function to make sure it isn't called too often
throttlededOnMove = throttle(onMove, 300);
$(window).scroll(throttlededOnMove);
}
// attach scroll listener on document ready
$(setScroller)
I have two tables that must scroll together:
$('.vscroll').on('scroll', function (e) {
divTable1.scrollTop = e.scrollTop;
divTable2.scrollTop = e.scrollTop;
There's a little lag issue though. Table1 scrolls milliseconds before Table2.
I know scrollTop fires the scroll event, but is there a way to delay the scrolling of Table1 until Table2's scrollTop is also set?
Try using a setTimeout to trigger the scrolls, and then return false to cancel the original scrollevent:
var ignoreEvent = false;
$(".vscroll").on('scroll', function (e) {
if (!ignoreEvent) {
setTimeout(function() {
ignoreEvent = true;
table1.scrollTop = e.scrollTop;
table2.scrolLTop = e.scrollTop;
}, 100);
}
ignoreEvent = false;
return false; // cancels the original scroll event.
}
I'm using divs instead of tables but you get the idea
$("div").on("scroll",function(){
$("div:not(this)").scrollTop($(this).scrollTop());
});
DEMO
I'm using jquery slideDown() and slideUp() to show a fixed gototop link when the scroll bar height is more than 200px.
Problem:
Link slide action mixed up in a fast mouse wheel up and down. Because of 0.4 sec running time of slide functions. I tried to define a visible flag and complete functions to prevent mixing. But not successful.
JsFiddle
Scroll down in result block to view the link and try a fast wheel up and down. If the result block has big height on your screen, please decrease the height to see the action.
impress: function () {
if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT
&& !this.buttonVisibleFlag)
{
this.button.slideDown(400, function() {
Blue.buttonVisibleFlag = true;
});
}
else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT
&& this.buttonVisibleFlag)
{
this.button.slideUp(400, function() {
Blue.buttonVisibleFlag = false;
});
}
}
Any ideas or help would be greatly appreciated.
I think your best bet would be to perform the sliding actions only after the user has stopped scrolling for a certain (small) period of time. I found this method to detect when the user stops scrolling and implemented in your code, here's the result:
Updated fiddle
var Blue = {
MIN_SCROLL_HEIGHT: 200,
button: null,
buttonVisibleFlag: null,
init: function () {
this.button = $(".gototop");
this.buttonVisibleFlag = false;
this.setWindowBindings();
},
setWindowBindings: function () {
$(window).scroll(function () {
//perform actions only after the user stops scrolling
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
Blue.impress();
}, 150));
});
},
impress: function () {
if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT) {
this.button.slideDown();
} else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT) {
this.button.slideUp();
}
}
}
$(document).ready(function () {
Blue.init();
});
Note: you may want to tweak the timeout interval to suit your needs
Fiddle: http://jsfiddle.net/RJShm/
I have a jScrollPane that currently scroll from left, to right, then back left, and stops. What I'd like is for this to continually scroll from left to right, the right to left, then repeat. I have this fairly close to working by using pane.bind('jsp-scroll-x'..., but I can't seem to get it to scroll back to the right after one cycle. Current code for that:
pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
if (at_right)
{
api.scrollToX(0);
$(this).unbind(event);
}
});
I would also like for this to stop autoscrolling when anything in the pane is clicked (scroll bar, arrows, content, anything), and it would preferably restart after a few seconds of no clicks.
So, in short, how do I:
Make the jScrollPane scroll left/right automatically
Stop autoscrolling when clicked
Restart autoscrolling after a few seconds of no clicks inside the pane
Thanks
EDIT: jScrollPane Settings, and api for your convenience.
I have updated the handler for toggling the infinite scroll and also implemented click handler to pause the scroll and resume after a timeout (5 seconds). See draft code below and check the DEMO: http://jsfiddle.net/p6jLt/
var defaultSettings = {
showArrows: true,
animateScroll: true,
animateDuration: 5000
},
pauseSettings = {
showArrows: true,
animateScroll: false
};
var pane = $('.scroll-pane').jScrollPane(defaultSettings);
var api = pane.data('jsp');
var isFirst = true,
posX = 0,
isLeft = false,
timer;
pane.bind('jsp-scroll-x', scrollFx)
.mousedown(function () {
//lets make sure the below is
//executed only once after automatic croll
if (posX != -1) {
$(this).unbind('jsp-scroll-x');
api.scrollToX(posX);
api.reinitialise(pauseSettings); //no animation
posX = -1;
}
}).mouseup(function () {
clearTimeout(timer); //clear any previous timer
timer = setTimeout(function () {
isFirst = true;
posX = 0; //reset the killer switch
api.reinitialise(defaultSettings); //animateed scroll
pane.bind('jsp-scroll-x', scrollFx); //rebind
api.scrollToX(isLeft ? 0 : api.getContentWidth()); //resume scroll
}, 5000);
});
var scroll = api.scrollToX(api.getContentWidth());
function scrollFx(event, pos_x, at_left, at_right) {
if (posX == -1) { //kill scroll
$(this).unbind(event);
return false;
}
if (at_right) {
api.scrollToX(0);
isLeft = true; //used for restart
} else if (at_left && !isFirst) {
api.scrollToX(api.getContentWidth());
isLeft = false; //used for restart
}
isFirst = false;
posX = pos_x;
}
Issues: The plugin is little buggy with scroll sometimes, but it doesn't break the infinite scroll. You may find the little hicks on scroll, but it works for the most part. Test it out thoroughly and see how it goes.