Develop Reference

Touch events only firing "once" during scroll in Mobile Safari on iPad iOS 11.4

While scrolling in Mobile Safari, the first touchstart, touchmove, and touchend events are fired, however, if you're still scrolling additional touch events are not fired.
For my application this is problematic because a user can stop the scroll with their finger and I can't tell if there is a finger down. When a finger is down you can't set scrollTop of the window or rather you can set it, and it changes, but the window doesn't scroll. When the user moves their finger again it starts scrolling not from where I set the scrollTop but to whether their finger was put down.
Please no comments on why I want to change the scrollTop of the window; let's just accept that as an a priority requirement. Any thoughts for how to detect if there is a finger down?

how about using "detect click on mousedown" like technic?
something like:
var touchStart = false;
function onTouchStart() {
touchStart = true;
}
function onTouchEnd() {
touchStart = false;
}
function someFunction() {
if (touchStart) ...;
else ...;
}

You cannot handle touch events when iOs momentum scrolling is active. This also prevents developers from disabling iOs zoom.

implementing horizontal scrolling with two finger gesture

I am trying to implement horizontal scrolling using a two finger gesture on laptops. I am trying to find a solution that works in IE, chrome and safari. Currently I have tried to using the mouse wheel event to simply capture the scrolling Event. I thought I could use the deltaX and deltaY to determine if it is scrolling vertically and horizontally.
$('#ryan').on('mousewheel', function (event) {
if (event.originalEvent.deltaX > 0) {
console.log(event.originalEvent.deltaX);
console.log("horizontally");
console.log(event.deltaX);
}
Here is a fiddle which is not working. I am also not sure if there is another event I am missing.

I have never done it but jquery has a well documented element handler for scroll
I would try
$('#ryan').scroll(function(event) {
if (event.originalEvent.deltaX > 0) {
console.log(event.originalEvent.deltaX);
console.log("horizontally");
console.log(event.deltaX);
});
http://api.jquery.com/scroll/

How to identify REAL mouse movement when entering fullscreen mode

I have the problem, that I need to know if the user actually moved his mouse for real when entering fullscreen, or if it just is a programatically side effect of entering the fullscreen.
Because, when entering fullscreen, the mouse Y coordinates change automatically because the mouse moves upwards on the absolute screen position (since the top navigation of the browser disappears). And since every browser brings a notification in fullscreen mode, this very notification triggers a mousemove event.
So, this makes it very painful to find out, whether the user acually move the mouse, or not.
Is there a solution to identify REAL mouse movement?
$(document).on('mousemove', function(event){
/* gets also triggered when just entering fullscreen,
but without actual movement of the physical mouse..
how can this be identified/ignored?
*/
});
JS Fiddle
What I've tried so far
I tried already relativating the mouse position by using something like window.screen.top - but this seems not to be implemented yet by any browser so far.

I don't think there's anything formally implemented as yet to detect full screen. There's a fullscreenchange as part of the Fullscreen API but it's still experimental and requires vendor-specific prefixes.
So, basically you'll have to get around that limitation with some tricks, like intersecting the resize event and skipping whatever logic you are running on mousemove. Here's an example...
var resizing = false;
$(document).on('mousemove', function(event){
if(resizing == false){
$('p').text(event.pageX + ':' + event.pageY);
console.log("moving");
}
});
$(window).resize(function(){
resizing = true;
setTimeout(function(){
resizing = false;
}, 4000);
});
This example simply defines a flag that determines whether the window is resizing or not, if resizing the onmousemove logic is skipped. Particularly I hate to use setTimeout with an arbitrary time to switch off the resizing flag, but if your requirements are not so strict it can get the job done beautifully

Why don't you incorporate a delay (for example 0.5 seconds) where you ignore all mouse inputs. After the delay, any mouse movements are likely to be from the user...

I solved it now by saving the mouse coordinates, and check if they change - while I force one mousemove event after fullscreen in order to update the coordinates once.
$(document).on('mousemove', function(event){
if(event.pageX == $(this).data('mouseX') && event.pageY == $(this).data('mouseY'))
return;
$(this)
.data('mouseX', event.pageX)
.data('mouseY', event.pageY)
;
});
$(document).mousemove();

How to disable smooth scrolling in Chrome

I'm creating a web app (that's mostly focused on usage in Chrome), but the 'smooth scrolling' (I guess that's what it's called, the 'extra' scrolling like on IOS) of Chrome (when on mac) gets in the way.
Is there any way to disable this via javascript?

I was able to mitigate some rendering issues I was having with smooth scrolling by intercepting wheel events and moving the scrollTop/scrollLeft pixel positions "by hand":
function wheeled(event) {
event.preventDefault()
container.scrollTop += event.deltaY
container.scrollLeft += event.deltaX
}
container.addEventListener('wheel', wheeled, { passive: false, capture: true })
// actual render code is in the `scrolled` handler because
// there are other wheel events in the code that adjust the scroll position
container.addEventListener('scroll', scrolled, { passive: true })

What you're referring to as smooth scrolling is called overscroll bounce or rubber-band scrolling.
Disable iOS Overscroll but allow body scrolling

Use Javascript to set the CSS style of the HTML and BODY tags.
Set their "overflow" property to "hidden".

Using the mouse wheel to scroll a browser window horizontally

I have a very wide website, intentionally designed to have no vertical scrolling but a lot of horizontal.
Scrolling horizontally is usually a pain to users so was wondering if there was some way of using the middle mouse or other scrolling habits (eg. page up/down, up/down arrows, middle mouse click/drag) to scroll horizontally instead of vertically.
Edit: The main reason for requiring horizontal scrolling is because the layout/approach is a left to right graphical/interactive timeline. I've since found some examples;
This one with MooTools: http://www.tinkainteractive.com.au/ and a few other examples I found at http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/

You can add your own event listener
document.onmousewheel = myScrollFunction
Scrolling can be done by
window.scrollBy(x, y)
Where x is the horizontal scrolling offset and y the vertical scrolling offset.
So you might just call this function in your event listener. You may have to stop bubbling with event.stopPropagation and prevent browser default behaviour with event.preventDefault so that the original scrolling behaviour doesn't get applied anymore.
Edit: I was curious about this so I implemented something :-)
function onScroll(event) {
// delta is +120 when scrolling up, -120 when scrolling down
var delta = event.detail ? event.detail * (-120) : event.wheelDelta
// set own scrolling offset, take inverted sign from delta (scroll down should scroll right,
// not left and vice versa
var scrollOffset = 10 * (delta / -120);
// Scroll it
window.scrollBy(scrollOffset, 0);
// Not sure if the following two are necessary, you may have to evaluate this
event.preventDefault;
event.stopPropagation;
}
// The not so funny part... fin the right event for every browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (document.attachEvent)
document.attachEvent("on"+mousewheelevt, onScroll);
else if (document.addEventListener)
document.addEventListener(mousewheelevt, onScroll, false);
This works in Firefox 3.5 and Opera 10, however not in IE8. But that would be your part now... ;-)

I wouldn't change this behaviour. It would be very unexpected to the user. Maybe it makes sense to cover the symptom and re-layout your website to switch to a more vertical centered approach?
Still you can do loads of event-handling stuff with java-script, but as said I would rethink the layout.