We Keep Coding

How to auto scroll (up&down) to section when user scroll (not click!)

I'm trying to achieve a sliding scroll (like fullPage.js) by myself. I don't want to create a plugin either use a plugin. I only want to scroll/slide to a section when user trigger scroll (up and down!).
I've searched all over the internet and I do not know how to prevent the user from scrolling to replace standard scroll behavior by my animated scroll (desktop and mobile). I want to implement this animation inside a Bootstrap carousel item.
Summarizing, I have a carousel with several items, and each item will have a caption (outside the viewport). When the user scrolls down, then I will show the caption (like third slide here), and when the user scrolls up, I will scroll up and hide the caption.
Here is the CodePen with the carousel example running: link
This is what I get so far (I've got part of the code from StackOverflow)...
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
_direction = 'down';
window.scrollTo(0, document.body.scrollHeight);
} else {
_direction = 'up';
window.scrollTo(0, 0);
}
_top = _cur_top;
console.log(_direction);
});
});
I get a very (very!) slow animation... It is not smooth at all.
I've tried this too:
$(document.body).on('DOMMouseScroll mousewheel', function (event) {
event.preventDefault();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// Scroll up
$("html, body").animate({scrollTop: 0}, 400);
}
else {
// Scroll down
}
});
But, that code does not work and I get this error: [Intervention] Unable to preventDefault inside passive event listener due to the target being treated as passive.
I will be very thankful if you can help me, please!
Edited:
Someone helped me at "StackOverflow en español". Here is the solution!! Many thanks to #matahombres ;)

How to create forced scrolling to anchors on a website on scroll

I have a site where I have each section as 100vh so it fills the height of the screen perfectly. The next step I wanted to implement was disabling the regular scrolling, and on scroll force the screen to jump smoothly to the top of the next 100vh section. Here is the example of this animation / feature:
https://www.quay.com.au/
I was having a hard time finding any answers for this as most things just deal with smooth scrolling when clicking on anchors, not actually forcing div relocation when the user scrolls up / down.
I just wanted to know what code I would need do this...
Thanks, been using stack overflow for a while but first post, let me know if there is anything I can do to make this more clear.

disclaimer: this solution needs some testing and probably a bit of improvements, but works for me
if you don't want to use a plugin and prefer a vanilla JavaScript solution I hacked together a small example how this can be achieved with JS features in the following codepen:
https://codepen.io/lehnerchristian/pen/QYPBbX
but the main part is:
function(e) {
console.log(e);
const delta = e.deltaY;
// check which direction we should scroll
if (delta > 0 && currentlyVisible.nextElementSibling) {
// scroll downwards
currentlyVisible = currentlyVisible.nextElementSibling;
} else if (delta < 0 && currentlyVisible.previousElementSibling) {
// scroll upwards
currentlyVisible = currentlyVisible.previousElementSibling;
} else {
return false;
}
// perform scroll
currentlyVisible.scrollIntoView({ behavior: 'smooth' });
e.preventDefault();
e.stopPropagation();
}
what it does is that it listens for the wheel event and then calls the callback, which intercepts the scroll event. inside the callback the direction is determined and then Element.scrollIntoView() is called to let the browser do the actual scrolling
check https://caniuse.com/#search=scrollintoview for browser support, if you're going for this solution

JS disable event from fire

I am creating a vertical slider, where you have to scroll down 3 times (3 slides ), before seeing the content.
The problem is that once you've scrolled down through the 3 slides, the mouse scroll is disabled with this code (I think):
$(window).on({
'DOMMouseScroll mousewheel': elementScroll
});
So I would like to find the way to enable the mouse scroll after the 3 slides. Any ideas?
This is what I've done so far
Thank you

I dont know if your scroll is tied to a full page scroller (like Fullpage.js) - but if it is, then this should work.
var count = 0;
$(window).on({
'DOMMouseScroll mousewheel': elementScroll;
count++;
});
if(count === 2){
$(window).off({
'DOMMouseScroll mousewheel': elementScroll
});
}

An Issue With jQuery and Safari

I am attempting to create a navigation bar that slides up and off the screen when a user scrolls down, and then scrolls back down when a user stops scrolling / scrolls up. Below is a snippet of my script and a jsfiddle:
$(document).ready(function() {
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('.nav').addClass('active');
} else {
$('.nav').removeClass('active');
}
position = scroll;
});
});
https://jsfiddle.net/z2uc89sL/
Coupled with my CSS this works fine in all the browsers I have tested it in except for Safari (I'm running version 9.0.2 on a Mac). The problem that is occurring is that when you hit the top of page and there is no further room to scroll up, the nav gets hidden again by re sliding up (as though the user was actually scrolling down again rather than butting up to the top of the page). The opposite is happening at the bottom of the page too.
If you look at the fiddle in Safari you will see the issue I am talking about. If you look at the fiddle in any other browser you'll see what I'm trying to achieve.

This is because of bouncing effect in safari.
You can disable it with some extensions like iNoBounce.
Or simply compare current position like this.
if (scroll > position && position > 0) {
$('.nav').addClass('active');
} else if (position < $(window).height()){
$('.nav').removeClass('active');
}

Below i tried to provide you two different answers, First solution is related to your .nav class while Second is simulation of same functionality as a function. So, it could be reused.
var el = $(".nav");
$(window).scroll(function() {
el.addClass('active');
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function() {
el.removeClass('active');
}, 250));
});
/*
* As a Function
*/
function scrollFunc(el) {
var el = el;
$(window).scroll(function() {
el.addClass('active');
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function() {
el.removeClass('active');
}, 250));
});
}
scrollFunc($('nav'));
To see the results online, Please have a look at my fiddle https://jsfiddle.net/yeoman/g19nejfu/1/ i forked your question and update it with working answer.
I would love to explain about what's going on but actually this question is somehow answered already. So, for that purpose, i will share some useful links. One should check them out to understand it.
jQuery scroll() detect when user stops scrolling
http://gabrieleromanato.name/jquery-check-if-users-stop-scrolling/
Hope that my answer will you. Thanks, Cheers!

Disable FlexSlider interactions when scrolling vertically

I'm using the FlexSlider jQuery plugin. I'd like to disable any interactions with the slider when the user starts to scroll the page vertically on a touch device, especially when the user starts the touch on the slider and swipes vertically. How can I do that?
What I have tried so far:
Disable vertical scrolling of the page, when the user swipes horizontally on the slider: jQuery(document).on('touchmove', function(event_) { event_.preventDefault(); }) => works
Detect vertical scrolling by using the if (_scrollTop !== jQuery(window).scrollTop()) method => works
Put a layer above the slider to prevent any further touch events on the slider when scrolling vertically: jQuery('#flexslider-touch-blocker').show().focus() => doesn't work
The layer method (step 3) works when it has display: block right from the beginning, so that the touch event is triggered directly on and is being captured by the blocking layer. However the touch events obviously do not arrive on the layer if the user is already scrolling the page and I unhide the blocking layer right below the finger tip of the user. Why? Note: I give a bonus internet point for answering this why-part of the question :D
Any other method to disable FlexSlider interactions when scrolling vertically? Maybe using pure css on the plugin, maybe using overflow: hidden; or something else?
Please do not suggest to use another plugin or to create one myself, since I am using the FlexSlider features extensively.
UPDATE:
As a temporary solution I edited the source code of the plugin:
function onTouchMove(e) {
// START OF LIB EXTRANEOUS CODE
if (jQuery(this).hasClass('disabled')) { return; }
// END OF LIB EXTRANEOUS CODE
Anyway it would be great if you'd come up with a better idea.

I was having the same problem, and found a potential solution from the FlexSlider GitHub:
https://github.com/woothemes/FlexSlider/issues/530
Taking that advice, I managed to get it working by removing the touchmove listener when the user is not scrolling:
el.removeEventListener('touchmove', onTouchMove, false);
So the onTouchMove() class now looks like this:
function onTouchMove(e) {
dx = (vertical) ? startX - e.touches[0].pageY : startX - e.touches[0].pageX;
scrolling = (vertical) ? (Math.abs(dx) < Math.abs(e.touches[0].pageX - startY)) : (Math.abs(dx) < Math.abs(e.touches[0].pageY - startY));
if (!scrolling || Number(new Date()) - startT > 500) {
e.preventDefault();
if (!fade && slider.transitions) {
if (!vars.animationLoop) {
dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
}
slider.setProps(offset + dx, "setTouch");
}
} else {
el.removeEventListener('touchmove', onTouchMove, false);
}
}