We Keep Coding

Trackpad not working as expected for horizontal scroll

I've got the little bit of below code running horizontal scroll on 2 pages on my website
<script>
// mouse wheel horizontal scroll
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
</script>
The issue is that when you are using a trackpad, your first thought is to move sideways, but as it is currently you have to move up and down to scroll horizontal.
Is there aa way to turn this off for if someone is using a trackpad? Or any alternative suggestions?
Bonus if it can be turned of for mobile display size, as horizontal isn't used here. Touch screen scrolling works but if you are using a scroll wheel it doesn't scroll up and down becasue of this code. (Realise it's very unlikily anyone would be using a mouse at tablet mobile screen sizes)
I'm expecting the trackpad to be able to move left to right and scroll through horizontally, while still keeping scroll wheel working horizontal, but only on two pages of the website.

Diagonal scrolling when both X and Y scrollbars are available

I use a magic trackpad (a touchpad) and one thing I have noticed is that applications such as Adobe Photoshop will let me scroll diagonally (both X and Y axis at the same time).
I never thought about using that same functionality in my browser, as I didn't have any use case for it. Until now. I'm working on a project which has a "canvas" (a drawing area) that is bigger than the visible area of the browser.
I have scrolling bars (overflow: auto;), but moving around the canvas just doesn't feel as "good" (in terms of UX) as with Photoshop. That's because I can't scroll both axes at the same time.
Eg, if I'm at the top left corner of the canvas and I want to go to the bottom right corner, in Photoshop I just touch-drag diagonally two fingers on my touchpad, but in Chrome/Safari/Firefox I first have to scroll down and then scroll right.
Visual example: https://codepen.io/alexandernst/pen/XWpPJNj (the left area shows the entire canvas, the right one is what the user sees. Try to scroll in the right area until you see the red square.)
Is there any way I can implement diagonal scrolling?

Aurelia animations based on events

How do you animate elements in Aurelia based on events? (i.e., touch events in the browser called touchstart, touchmove, touchend)
Let's take the Android Gmail app as an example for this question. You can archive certain messages by swiping a message to the right or left and you can extend the side menu by pressing the hamburger icon in the top left or start swiping on the left edge of the screen. These elements move depending how much you've moved your finger from the begin position. How would you do this in Aurelia?

How to capture mouse wheel (Middle Button) click event in JavaScript

I want to know how to capture mouse wheel click event which shows:
Following image I want to capture the event of auto scroll down/up on moving mouse, to right left top bottom buttons respectively. On moving my mouse below, above, to left or right of that image (Navigation image)

Two-fingered scroll js on touchpad

We have developed a site whcih has a horizontal orientation and are wanting to implement touchpad control with two fingers move left/right.
When you move two fingers left/right on touchpad, the site page is being scrolled left/right. Now we have implemented touchpad control with two fingers move up/down and page scrolled left/right.
How can we change touchpad control with two fingers move from up/down to left/right to scroll site page left/right using js or jQuery?

I may be a little late but had the same question before I stumbled over this question.
A little further investigation lead me to think that the best bet to capture trackpad scrolling would be the wheel event.
function doScroll(e) {
// positive deltas are top and left
// down and right are negative
// horizontal offset e.deltaX
// vertical offset e.deltaY
console.log(`x:${e.deltaX} y:${e.deltaY}`);
e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);
I have prepared a fiddle that tells you the scroll direction and offset values but prevents the scrolling itself.
The wheel event has a delta property that (at least in Chrome) is sensitive to momentum and gives you the current relative scroll offset rather than the absolute scroll position available in the scroll event.

Usually when you want to take over touch events in script, you add something like this to prevent the usual scroll and zoom:
$("body").bind("touchstart", function(e) {
e.preventDefault();
})

What you need to do is change what can be scrolled. If your page is big enough where left/right scrolling makes sense, the browser will allow it be scrolled that way.
Basically, if you only want them scrolling in a certain direction, only make content in that direction. If necessary, you can achieve this by having a container div of the specific size you want with overflow set to none.