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

Scroll duration when scrolled

I am using Jquery to create an effect that will change things as the user scrolls
$(function() {
var headerPosition = $(".home-header");
$(window)
.scroll(function() {
var scroll = $(window)
.scrollTop();
if (scroll >= 200) {
headerPosition.addClass("home-header-color");
} else if (scroll <= 600) {
headerPosition.removeClass("home-header-color");
}
});
});
This is what i'm using a simple add remove class function that gets triggered on a certain scroll amount.
What I want to do is to make it as a user scrolls once no matter how fast.
This is what I came up with but dose not work well scrolling up.
Codepen
I want it to only appear when you reach the top of the screen when scrolling up. Not on just one scroll up.
I tried combining the two but it didn't work out well.

Cross-broswer support - Mouse scroll controlling next/prev Bootstrap carousel slide

I found an example that I want to use but am not sure how to adapt this code for the Bootstrap carousel controls. https://www.sitepoint.com/html5-javascript-mouse-wheel/
I am using the code below, but it only works in Chrome, so I was hoping to adapt it with the other code. I thought it would be straight forward but my attempts have not worked.
$('.carousel').bind('wheel', function(e){
if(e.originalEvent.deltaY > 50) {
$(this).carousel('next');
}
else if (e.originalEvent.deltaY < -50) {
$(this).carousel('prev');
}
});
-------UPDATE--------
I found the answer on another thread that worked well across different browsers: mousewheel event is not triggering in firefox browser
Here is the code adapted for my needs, mouse scrolling to control the next / previous slides on my Bootstrap 3 Carousel. Hope that helps anyone!
$(window).on('wheel', function(event){
// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
if(event.originalEvent.deltaY > 50){
// wheeled down
$('.carousel').carousel('next')
}
else if(event.originalEvent.deltaY < -50) {
// wheeled up
$('.carousel').carousel('prev')
}
return false; //to disable page scrolling
});

Found the answer and have updated my original post.

Unbind wheel event in Jquery

I want to design my website using skrollr.js and fullpage.js libraries. But skrollr uses the value of scrollTop to transform elements that we choose and fullpage.js seems to scroll the page but he just change the top value of the viewport, so ScrollTop doesn't change and skrollr.js is not effective.
I looking for some informations and i finally do my own fullpage.js (i tried) :
$('.frame').css({
'height':$(window).height()
});
var active ="section 1";
$(window).bind('mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
if (event.originalEvent.wheelDelta >= 0) {
if(active=="section 2"){
$("html,body").stop().animate({scrollTop: 0}, 1000);
active="section 1";
}
else if(active=="section 3"){
$("html,body").stop().animate({scrollTop: $(window).height()}, 1000);
active="section 2";
}
}
else {
if(active=="section 1"){
$("html,body").stop().animate({scrollTop: $(window).height()}, 1000);
active="section 2";
}
else if(active=="section 2"){
$("html,body").stop().animate({scrollTop: $(window).height()*2}, 1000);
active="section 3";
}
}
});
I have 3 div .frame
But when i'm on the first div and i scroll down, my viewport go to the third because i bind the event more than one time.
I want to bind one event, scroll and unbind the event for maybe 1 sec.

Now fullPage.js includes an option called scrollBar since version 2.4.4 which uses the scrollTop feature and therefore works as expected with plugins such as the one you mention or even parallax.
It is set to false by default, so you would have to turn it on when initializing fullPage.js.
Check this living example.
scrollBar: (default false). Determines whether to use scrol bar for the site or not. In case of using scroll bar, the autoScrolling functionallity will still working as expected. The user will also be free to scroll the site with the scroll bar and fullPage.js will fit the section in the screen when scrolling finishes.

Switch tabs based on mouse scroll

I would like to have a widget on a webpage containing a number of tabs. When the user scrolls the page and the widget comes in to view and he keeps scrolling down, the tabs should be activated one by one (without the page scrolling further down). Once the last tab is showing, the page should resume scrolling as usual. Is this doable using JS/jQuery?
UPDATE:
Since this seems too broad a question:
The problem is, I don't know how to use the scroll offset and prevent the page from scrolling down until I decide it can resume its normal behavior
UPDATE 2
I created This fiddle,
$(document).ready(function(){
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
// BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
// SCROLLABLE DIV AND GIVE IT FOCUS HERE?
});
});
it contains a long page and a scrollable div among its contents. The only problem is that the div starts catching scroll events only if I move my mouse. If I could find a bulletproof way to activate the scrolling div whenever the mouse is over it I'm there. Any ideas?

You can't prevent scrolling with javascript. Using iframes and divs with scroll will only work if the mouse is over them.
You can cancel the mouse wheel and keys events related to the scrolling, however the user will be able to scroll using the scrollbar (more here).
Another approach is leaving an empty area and fixing your widget inside this area, like in this working example
$(window).bind('scroll', function()
{
var scroll = $(window).scrollTop(),
innerHeight = window.innerHeight || $(window).height(),
fooScroll = $('#fooScroll'),
emptyArea = $('#emptyArea'),
offset = emptyArea.offset(),
fixedClass = 'fixed';
if(scroll > offset.top)
{
if(scroll < offset.top + emptyArea.height() - fooScroll.height())
{
fooScroll.addClass(fixedClass);
fooScroll.css("top", 0);
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", emptyArea.height() - fooScroll.height());
}
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", 0);
}
});
Then you can change the tabs while the page is scrolling.

You should be able to do this. You can use the jQuery scroll event to run your own code whenever the user scrolls up or down. Also, so long as you call e.preventDefault() whenever the scroll event is fired, you can prevent the whole window from scrolling up or down.