We Keep Coding

How should I transfer a wheel or scroll event from one element to another?

I have an absolutely positioned element over a scrollable area of my site. Clicking on this element will scroll the page down; it is for use by students with chromebooks that hide the scrollbars and do not provide a nice touchpad scrolling experience.
If a user (on Chrome) is scrolling manually, however, and the cursor slides over the absolutely positioned button, the page stops scrolling altogether. I would like for the page to scroll "normally" while the cursor is hovering over the button.
Capturing the wheel event and then making a new wheel event and dispatching it to the scrollable content does not work, I believe because .isTrusted is false.
As a workaround, I am capturing the wheel event and manually calling .scrollBy on the scrollable element. This does not scroll the page by the same distance though, and also results in jerky, stuttering scrolling.
elemScrollImg.addEventListener('wheel', (e) => {
console.log("Img scroll: ", e)
let deltaY = e.deltaY
// Wanted to make a new WheelEvent to pass to the container
// but isTrusted is false for "fake" events, and the page
// apparently just ignores them :-/
// https://stackoverflow.com/a/44462125
elemContent.scrollBy({
top: deltaY,
left: 0,
// smooth scrolling apparently just makes it all worse,
// esp. on touchpad scrolling.
// behavior: 'smooth',
})
https://jsfiddle.net/seatag/a8m1kw20/58/
Is there a recommended way to accomplish this?

I wound up using position: sticky to place the button inside the scrollable container, which allows wheel events to bubble up normally. This does not answer my question, but it does solve my problem.
.arrowWrapper {
position: sticky;
bottom: 15px;
padding: 6px;
padding-bottom: 15px;
width: 200px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
background: #f00;
}
https://jsfiddle.net/seatag/yb02c4sa/8/

Changing scrollTop does not continue inertia scrolling

I have a div with scrollable content that at a certain scrollTop value goes back to top.
var container = document.getElementById('container');
function scroll_function() {
var new_position_top = container.scrollTop;
if (new_position_top > 600) {
container.scrollTop = 0;
}
}
container.addEventListener('scroll', scroll_function);
#container {
width: 300px;
height: 300px;
overflow: auto;
border: 1px solid black;
-webkit-overflow-scrolling: touch;
}
span {
width: 100%;
height: 1200px;
float: left;
background: red;
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}
<div id="container">
<span></span>
</div>
JSFiddle.
Using a MacBook trackpad I am getting different behaviours:
Chrome and Safari work as I would expect, continuing the inertia after going back to the top.
Firefox, however, goes back to the top and stops the inertia.
Using iOS Safari a similar issue appears too, as the scrollTop position is not updated until the inertia finishes.
Is there a better way of approaching it or a way to fix desktop Firefox and iOS Safari behaviour?

Using a library to handle smooth scroll would help at some point.
However, the inertia that is induced by the trackpad cannot be stopped because it is not controlled by the browser.
Depending on the device type (mouse wheel, trackpad) or operating system (Windows, OSX) and browser type (Chrome, Safari, Firefox), the inertia of the scroll will be handled differently.
Unfortunately, you cannot truly control the inertia from the javascript sandbox. You may try to circumvent it or create an artificial one, but you cannot go against the user trackpad.

Well, it should be an issue with iOS. Please check these resources below for more information first.
javascript scroll event for iPhone/iPad?
http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/
My experience in the past is to use a library named iScroll and then you can apply its function scrollTo

What I would suggest you is to use external JS library like iScroll to deal with scroll event on iOS

The script does not work properly in the browser Internet Explorer. How to fix?

Welcome! Help me please! The script does not work properly in the browser Internet Explorer. During the scroll there is a strong pull the block up and down. How to fix? Help me please. Thank you very much for your help!
$(function() {
var $hor = $("#horizontal");
$("body").css('padding-bottom', $(window).width()*2);
var delta = 0;
$(window).on('scroll', function () {
var top = $(document).scrollTop();
var width = $(window).width();
var lim = $hor.position().top - (delta) - ($(window).height() - $hor.outerHeight()) / 2;
delta = Math.min(Math.max(top - lim, 0), width * 2);
$(".horizontal:first", $hor).css({left : delta});
$(".horizontal:last", $hor).css({left : -(width*2 - delta)});
$("body").css({'padding-top': delta, 'padding-bottom': width*2 - delta});
});
});
p {
height: 500px;
}
#horizontal {
position: relative;
overflow: hidden;
width: 100%;
font-size: 3em;
margin: 0;
padding: 0;
height: 250px;
}
#horizontal .horizontal {
position: absolute;
width: 100%;
left: -100%;
padding: 20px;
}
#horizontal .horizontal .h_blockquote {
position: relative;
width: 100%;
margin: 0 auto;
font-size: 24px;
line-height: 1.3em;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test</p>
<div id="horizontal">
<div class="horizontal">
<div class="h_blockquote">
<div class="h_blockquote_wrap">The script does not work properly in the browser Internet Explorer. The script does not work properly in the browser Internet Explorer.</div>
</div>
</div>
<div class="horizontal">
<div class="h_blockquote">
<div class="h_blockquote_wrap">The script does not work properly in the browser Internet Explorer. The script does not work properly in the browser Internet Explorer.</div>
</div>
</div>
</div>
<p>test</p>

You can't rely on scroll firing smoothly in old browsers or when using jQuery.
The problem is that the event that fires on scroll is allowed to cancel it, so the browser has to complete the event script before appearing to scroll the page - if this takes too long the scroll appears to stutter or hang.
In your script you're calling jQuery methods like .width() and .outerHeight() and these wrap underlying methods that wait for a DOM reflow. They're slow, not incredibly slow, but slow enough that a scroll animation can appear to drop frames or stutter waiting for them. You also change positioning, which also causes a reflow.
Modern browsers have a new feature to handle this: passive event listeners - as passive listeners can't cancel the event the browser doesn't have to worry about waiting for them. jQuery still doesn't support them, so it's recommended not to use jQuery for scroll events at all.
However none of those are available to IE - IE's solution to this problem was to debounce the event slightly. Multiple scrolls in quick succession would be stacked and only periodically fired, and DOM reflow changes can cause it to fire partly before and partly after. You don't really notice if you drag the slider but scrolling with the wheel appears to jerk when it catches up.
I'd try the following:
Move all the size checks that don't change between scroll events outside the scroll.
Change the positioning to be done with CSS transform: translate as this uses the graphics card to do the calculations.

Fancybox won't turn right on iPad

I implemented the fancy box as usual:
<img src="img/fotos/architektur/thumbs/1.jpg">
<img src="img/fotos/architektur/thumbs/2.jpg">
It works totally cool on Desktops but on my iPad it only works with the left control. A move forward to the next image (right arrow) doesn't work... Why?

if "cyclic" is set to true, maybe there's an overlay issue
did you try to display the page in a desktop window resized to ipad resolution? maybe with "Pesticide" activated ? (it's extension for chrome, will make outlines on all elements)
.fancybox-overlay {
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: none;
/* z-index: 9999;*/
background: url('fancybox_overlay.png');
}

$(window).scroll not working correctly on mobile devices and internet explorer

I'm using jQuery-1.10.2 and I am using the function $(window).scroll. The $(window).scroll isn't being executed as I scroll on a mobile device, but rather when my finger releases the screen after scrolling. $(window).scroll is also delayed on IE10.
I use $(window).scroll to make a navbar scroll with the page by changing the css property top: on the position:fixed; navbar. When scrolled down for enough, the navbar ends up sticking to the top of the page as position:fixed. Is there a more compatible alternative to achieve the same results to my navbar? Is there a fix for mobile or IE10?
$(window).scroll(function () {
$('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
var scroll = $(document).scrollTop();
});
Here is a fiddle with no images. Look at the navbar. http://jsfiddle.net/93tzq/

If I'm understanding what you want to do correctly I'm pretty sure you're over thinking this.To keep a nav element at top while you scroll you don't need any js. All you need to do is set the z-index and position accordingly.
For instance:
.nav-overlay{
position: absolute;
top: 90px;
left: 10%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
}
Then put the html as follow:
<nav class='nav-overlay'>
NAV BAR HERE
</nav>

You didn't specify your mobile browser, but this is a common question with Safari in iOS. MobileSafari does not trigger window.scroll until the scrolling has finished – this has been a problem addressed numerous ways (see iscroll, for example). Here's a similar post that may answer your question as far as making a sticky navbar.