We Keep Coding

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

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.

Is there a reliable way to detect scrolling, on all devices, using javascript/jQuery?

I've been struggling with this for a while, and I'm surprised that doing this isn't more straightforward...
I need to detect when the user scrolls a page, either with the mouse, scrollbar or by touch on mobile devices. jQuery has their scroll() function which works alright, but it requires that the page is actually scrolling. I want to detect the scrolling wether the page is scrolling or not (say I reach the end of the page, and there is nowhere left to scroll too.. I still want to know if the user is trying to scroll)
I found another question that had asked something similar, along the lines of detecting scroll input even when the page isn't scrolling, and I got this chunk of code:
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler(), false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
sq.attachEvent("onmousewheel", MouseWheelHandler());
}
function MouseWheelHandler() {
return function (e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta < 0) {
// increase scroll amount
} else {
// decrease scroll amount
}
}
return false;
}
At first, this seemed to do the trick, but I'm finding it doesn't really return balanced results with different types of mice, and didn't work too smoothly with touch events, which is the core aspect of this question.
I'm using this in a project that does a lot of fancy events on scroll, with the actual page not actually scrolling at all... But I'm running into the problem of it being incredibly slow with all my standard mice, but incredibly fast on my Apple Magic Mouse. I know that there will naturally be some difference here, as the magic mice do scroll quicker, but the difference is far more off balance than it is between the mice normally.
I'm hoping there is a way to improve upon this to get a more reliable result, with all sorts of different inputs. Any suggestions?
Edit:
To clarify, in order for an answer to work for me, it needs to work on an element which is not scrollable. I have a page which does not scroll at all, but which has other events that fire when the user scrolls. This means that I cannot use properties that are based on the window's scroll position (such as scrollTop()).

You should use window.onscroll most usage and then create a new listener to deal specifically with top and bottom scroll conditions I would suggest using a mousewheel event for desktop browsers and a specifically coded touch responder like below to detect if they are trying to scroll, what direction and if that is possible at the current window.scrollY value.
var isOverScroll = function isOverScroll ( touchStartY, touchEndY ) {
if ( Math.abs( touchStartY - touchEndY ) < 5 ) &&
( ( window.scrollY = window.innerHeight && touchStartY - touchEndY > 0 ) ||
( window.scrollY = 0 && touchStartY - touchEndY < 0 ) ) ) {
return false;
}
return true;
}
There is no way to detect scrollbar events, combine this with your current code and only trigger mouse wheel and touch events if the scrollY position is at either 0 or max.
On a side note if you are trying to get rid of the scroll bar completely that is a very bad idea as it is both a wonderful tool for users as well as something that is a standard part of the ui. If you trying to do a scrollable fullpage app and don't want a scroll bar try using slides. Either way don't continue setting the scroll value thats slow instead just move the whole body using css:
transition: transform3d( 0, YOURSCROLLVALUE , 0);

One possible solution is using a plugin for scrolling like
ISCROLL
in this example here :
Example
they use the feature pull to refresh , which will fire upon reaching the maximum scroll available , here by you can use any custom function (even if your item is not scrollable ).

Any way to prevent horizontal scrolling triggering swipe back gesture on OS X Lion Safari?

I am working on a UI that uses horizontal scrolling in a div element (using overflow: scroll). I cannot scroll to the left, because it would start the animation for going back in history. Likewise, I cannot scroll to the right when there is a website to go forward to.
It works well on other browsers including Chrome on OS X Lion, which also supports swiping to go back in history. (At one point while I was developing, scrolling in a div worked on Safari, too. I've added event handlers and html which probably broke scrolling, but I have no clue what made it change.)
Ideally, I would like to prevent going back or forward in history when scrolling on a specific div (even when it has reached an end.)
Update: I tried adding jQuery.mousewheel and it somehow fixed the problem. (I just attached a empty event handler on .mousewheel().) I am still looking for a definitive answer.

In order to allow an element (e.g. a <div>) to scroll with a trackpad but prevent the browser from going back to the previous page, you need to prevent the browser's default action.
You can do this by listening to the mousewheel event on the element. Using the scroll properties of the element and the deltaX/Y properties on the event, you can prevent and stop the default action when it goes below zero or above the width/height.
You can also use the delta information to manually scroll when you are preventing the whole scroll operation. This allows you to actually get to zero rather than stopping at 10 pixels or something.
// Add the event listener which gets triggered when using the trackpad
element.addEventListener('mousewheel', function(event) {
// We don't want to scroll below zero or above the width and height
var maxX = this.scrollWidth - this.offsetWidth;
var maxY = this.scrollHeight - this.offsetHeight;
// If this event looks like it will scroll beyond the bounds of the element, prevent it and set the scroll to the boundary manually
if (this.scrollLeft + event.deltaX < 0 ||
this.scrollLeft + event.deltaX > maxX ||
this.scrollTop + event.deltaY < 0 ||
this.scrollTop + event.deltaY > maxY) {
event.preventDefault();
// Manually set the scroll to the boundary
this.scrollLeft = Math.max(0, Math.min(maxX, this.scrollLeft + event.deltaX));
this.scrollTop = Math.max(0, Math.min(maxY, this.scrollTop + event.deltaY));
}
}, false);
This works on Chrome, Safari, and Firefox on Mac. I haven't tested on IE.
This solution will only affect the element in question and will let the rest of the page behave as normal. So you can use your browser as expected and go back a page, but while inside the element you won't accidentally go back when you didn't mean to.

I've been looking for a solution for days. What I have so far is in this plugin:
https://github.com/micho/jQuery.preventMacBackScroll
It disabled scrolling for OSX Chrome (I couldn't find a way to disable it for OSX Safari) when you scroll left and up.
I hope that helps, please contribute to the project with any bugs you find, or if you find a way to disable this annoying behavior for Safari

Yes, in order to disable default behavior (swipe, pinch etc.) all you have to do is to add:
event.preventDefault();
In you case simply register touchMove listener and use preventDefault() there (in function "touchmove").
element.addEventListener("touchmove", touchMove, false);

In modern browsers this should do the trick:
element.addEventListener("wheel", function(event) {
if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
// Scrolling more vertically than horizontally. Let it be!
return
}
const scrollLeftMax = this.scrollWidth - this.offsetWidth
if (
this.scrollLeft + event.deltaX < 0 ||
this.scrollLeft + event.deltaX > scrollLeftMax
) {
event.preventDefault()
}
}, false)
Side note: Firefox has a handy scrollLeftMax property, but it's not standard, so it's better to calculate it ourselves.

Look into the CSS3 style
-ms-touch-action: none;
touch-action: none;
This works perfectly for me when the used app is only expected on HTML5 / CSS3 capable browsers.

I also used jQuery mousewheel, attaching this callback:
onMousewheel: function(e, delta, deltaX, deltaY){
e.preventDefault();
$('leftElement').scrollLeft($('leftElement').scrollLeft() + deltaX); // leftElement = container element I want to scroll left without going back/forward
$('downElement').scrollTop($('downElement').scrollTop() - deltaY); // this was another element within the container element
}

Piggy backing off of https://github.com/micho/jQuery.preventMacBackScroll posted by micho I have made this possible in both safari and chrome. Also, I made it work for both left scrolling and right scrolling.
(Sorry that this is in coffeescript. It wouldn't be hard to translate back into javascript)
$(document).on 'ready', ->
# This code is only valid for Mac
if !navigator.userAgent.match(/Macintosh/)
return
# Detect browsers
# http://stackoverflow.com/questions/5899783/detect-safari-using-jquery
is_chrome = navigator.userAgent.indexOf('Chrome') > -1
is_safari = navigator.userAgent.indexOf("Safari") > -1
is_firefox = navigator.userAgent.indexOf('Firefox') > -1
# Handle scroll events in Chrome, Safari, and Firefox
if is_chrome || is_safari || is_firefox
$(window).on 'mousewheel', (event) ->
dX = event.deltaX || event.originalEvent.deltaX
dY = event.deltaY || event.originalEvent.deltaY
# If none of the parents can be scrolled right when we try to scroll right
prevent_right = dX > 0 && $(event.target)
.parents().addBack()
.filter ->
return this.scrollWidth - this.clientWidth != 0 &&
$(this).scrollLeft() < this.scrollWidth - this.clientWidth &&
($(this).css('overflow-y') == 'scroll' || $(this).css('overflow-y') == 'auto')
.length == 0
# If none of the parents can be scrolled left when we try to scroll left
prevent_left = dX < 0 && $(event.target)
.parents().addBack()
.filter ->
return $(this).scrollLeft() > 0
.length == 0
# If none of the parents can be scrolled up when we try to scroll up
prevent_up = dY > 0 && !$(event.target)
.parents().addBack()
.filter ->
return $(this).scrollTop() > 0
.length == 0
# Prevent minute left and right scroll from messing up vertical scroll
if (prevent_right || prevent_left) && Math.abs(dY) > 5 && !prevent_up
return
# Prevent futile scroll, which would trigger the Back/Next page event
if prevent_left || prevent_up || prevent_right
event.preventDefault()

I came here while searching for the same thing but from user's point of view. So here's the FF setting that affect this:
browser.gesture.swipe.left
browser.gesture.swipe.right
set them to an empty string (delete what is there)
Source: https://forums.macrumors.com/threads/disabling-firefox-back-forward-from-horizontal-scrolling.111589/

iScroll with native scrolling on one axis

I am using the most wonderful javascript tool iScroll4 http://cubiq.org/iscroll-4 on a mobile website for iOS and Android. Here is what my layout looks like:
The horizontally scroll-able area is making use of iScroll4 with the following settings:
var myScroll = new iScroll('frame', { hScrollbar: false, vScrollbar: false, vScroll: false })
The horizontal scrolling part works great. This issue is what happens when a user attempts to scroll up or down the page placing their finger on the horizontal scrolling area. So I need native vertical scrolling, and iScroll horizontal scrolling on the same area.
What I have tried so far:
Removing e.preventDefault() in the iScroll code (allows for native scrolling, but in BOTH axes).
Removing e.preventDefault() and then disabling horizontal scrolling page wide with this:
var touchMove;
document.ontouchstart = function(e){
touchMove = e.touches[0];
}
document.ontouchmove = function(e){
var theTouch = e.touches[0] || e.changedTouches[0];
var Xer = rs(touchMove.pageX - theTouch.pageX).toPos();
var Yer = rs(touchMove.pageY - theTouch.pageY).toPos();
touchMove = theTouch;
if(Yer > Xer){ e.preventDefault(); }
}
which seems to do nothing. How can I allow for native vertical scrolling in the horizontal scrolling area, without loosing the horizontal scrolling of iScroll? I am really stumped here. Thanks in advance.
(just for the record rs(foo).toPos() is a function that makes foo a positive number regardless of its value).

If you would like to achieve the effect described by Fresheyeball without hacking the core, and without changing from iScroll to swipeview, then iScroll 4 does offer you its event listeners to work with.
myScroll = new iScroll('scrollpanel', {
// other options go here...
vScroll: false,
onBeforeScrollMove: function ( e ) {
if ( this.absDistX > (this.absDistY + 5 ) ) {
// user is scrolling the x axis, so prevent the browsers' native scrolling
e.preventDefault();
} else {
// delegate the scrolling to window object
window.scrollBy( 0, -this.distY );
}
},
});
By doing so, the onBeforeScrollMove-Handler checks whether the scroll direction seems to be horizontal, and then prevents the default handler, thus effectively locking the scroll action to the X-Axis (try commenting it out, you'll see the difference). Otherwise, if the scroll direction needs to be vertical, we make the browser scroll via the window.scrollBy() method. This is not exactly native, but does the job just fine.
Hope that helps
Lukx
[EDIT]
My original solution, which didn't use window.scrollBy() ,did not work on slower Samsung phones, which is why I needed to adapt the answer.

Suggested edit to #Lukx's excellent solution. New versions of iScroll4 place the e.preventDefault() in onBeforeScrollMove which can be overridden. By placing the if block into this option, default is not prevented for vertical scrolling, and vertical can scroll natively.
myScroll = new iScroll('scrollpanel', {
// other options go here...
vScroll: false,
onBeforeScrollStart: function ( e ) {
if ( this.absDistX > (this.absDistY + 5 ) ) {
// user is scrolling the x axis, so prevent the browsers' native scrolling
e.preventDefault();
}
},
});

With iscroll 5, you can set eventPassthrough: true to achieve this. See http://iscrolljs.com/#configuring

OLD ANSWER
UPDATE a special pluggin has been written just to address this problem:
http://cubiq.org/swipeview
I found a way!
add a variable to the top of the document: if android is 15 and is iOS is 3
var scrollTolerance = ( rs().isDevice('android') )?15:3;
disable the original e.preventDefault(); for scrolling. This is under onBeforeScrollStart:
the in _move just under
timestamp = e.timeStamp || Date.now();
add this line
if( Math.sqrt(deltaX*deltaX) > scrollTolerance){e.preventDefault();}
What this does is the following:
the scrollTolerance sets, you guessed it, a tolerance for finger direction. We don't want to demand a perfect vertical angle to get the up down native scroll. Also iOS does not detect properly and will never be higher than 4 for some reason so I used 3. Then we disable iScroll's standard e.preventDefault(); which prevents native vertical scrolling on our bi-scrollable area. Then we insert e.preventDefault(); only upon move and based on finger direction from tolerance.
This does not work perfect. But is acceptable and works on iOS and Android. If anyone sees better ways please post here. This is something I (and assume others) need to use regularly, and we should have a perfect rock solid solution.
Thanks.

Please test this solution from Adam.
https://gist.github.com/hotmeteor/2231984
I think the trick is to add the check in onBeforeScrollMove. First get the initial touch position in onBeforeScrollTouchStart and then in onBeforeScrollMove check the new position and then disable the required scroll based on the difference.

iScroll 5 supports native scrolling of any axis!
http://iscrolljs.com/

on iScroll5 just set eventPassthrougt to true. That fixes it.