Specifically On Mobile, Scroll A Div From Anywhere (w/out Using Jquery Plugins)?

From the original question, we have successfully used D3js to detect a scroll event, which we use to scroll the div #scroll-content from anywhere; however, this solution works for

Solution 1:

The wheel event is fired when a mouse wheel is scrolled. Mobiles do not have a mouse, instead have a touch screen.

A more generic event, the scroll event will fire when a scroll is detected, the browser can decide when this is, meaning it works for both desktop mouse wheel scrolling, and touch device scrolling.

However, it appears that the scroll event won't fire if the page height is less than 100% of viewport height. I am unsure of whether this is true with the wheel event. If it is, then the below solution will need to also include mouse events (mousedown, mousemove etc.) in additional to touch events.

---

Considering you want more customized behaviour, in which you scroll the element regardless of where the user scrolls on the screen, and that the page doesn't need to physically scroll, you just want to capture that event and use it, it may be required to create a custom scrolling function; use the touchstart, touchmove, and touchend events on the document.body to fire the custom scroll code for your #scroll-content. You would also use the wheel event to fire the scroll code too, so it works for desktops too.

This would look something like this:

1. on touch start, store the y coordinate of the touch. startY = e.touches[0].pageY;
2. on touch move, find the delta between the start y and the move y. deltaY = startY-moveY;
3. fire the custom scroll event with this delta. customScroll(deltaY)

The custom scroll event will take a delta and apply this to the #scroll-content using something like element.scrollBy(0, deltaY)

You would also likely need to normalize the deltaY as the wheel deltaY may be a different magnitude e.g. *100 or inverse etc.

---

This is just a simplified description of how you could achieve your desired result. If you don't want ot use a plugin/library such as hammer.js then you will need to write the custom code yourself. Good luck.