How to set ipad scroll direction
To adjust how the onscreen content is scrolled, do the following:
- Open the Settings app on your iOS device with iOS or iPadOS 13.4
- Choose General from the list.
- Depending on your accessory, tap Trackpad or Trackpad & Mouse.
- On the adjustment screen that appears, enable or disable the toggle Natural Scrolling.
By default, Natural Scrolling is enabled.
As mentioned earlier in this tutorial, turning this option on will make onscreen content track the movement of your fingers on the trackpad or the surface of your Magic Mouse. If you come from a non-Apple platform like Windows or Linux, it may be a good idea to disable natural scrolling in order to make your iPad feel more familiar to what you’ve been using.
Javascript scroll event for iphone/ipad?
I was able to get a great solution to this problem with iScroll, with the feel of momentum scrolling and everything https://ipad-mobile.ru/cubiq/iscroll The github doc is great, and I mostly followed it. Here’s the details of my implementation.
HTML:
I wrapped the scrollable area of my content in some divs that iScroll can use:
<div id="wrapper">
<div id="scroller">
... my scrollable content
</div>
</div>
CSS:
I used the Modernizr class for «touch» to target my style changes only to touch devices (because I only instantiated iScroll on touch).
.touch #wrapper {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.touch #scroller {
position: absolute;
z-index: 1;
width: 100%;
}
JS:
I included iscroll-probe.js from the iScroll download, and then initialized the scroller as below, where updatePosition is my function that reacts to the new scroll position.
# coffeescript
if Modernizr.touch
myScroller = new IScroll('#wrapper', probeType: 3)
myScroller.on 'scroll', updatePosition
myScroller.on 'scrollEnd', updatePosition
You have to use myScroller to get the current position now, instead of looking at the scroll offset. Here is a function taken from http://markdalgleish.com/presentations/embracingtouch/ (a super helpful article, but a little out of date now)
function getScroll(elem, iscroll) {
var x, y;
if (Modernizr.touch && iscroll) {
x = iscroll.x * -1;
y = iscroll.y * -1;
} else {
x = elem.scrollTop;
y = elem.scrollLeft;
}
return {x: x, y: y};
}
The only other gotcha was occasionally I would lose part of my page that I was trying to scroll to, and it would refuse to scroll. I had to add in some calls to myScroller.refresh() whenever I changed the contents of the #wrapper, and that solved the problem.
EDIT: Another gotcha was that iScroll eats all the «click» events. I turned on the option to have iScroll emit a «tap» event and handled those instead of «click» events. Thankfully I didn’t need much clicking in the scroll area, so this wasn’t a big deal.
Natural scrolling vs. unnatural scrolling
By default, iPad scroll direction is set in such a way that makes onscreen content track the movement of your fingers on the trackpad or mouse surface. As a result, the contents of the screen move in the direction opposite to your finger movement on the trackpad.
For instance, drag up on the trackpad and content such as a webpage in Safari will move down, and vice versa — they’re calling it natural scrolling. If you come from Apple platforms, your mind kinda expects scrolling to work that way as this is how it’s always worked in iOS.
On Windows and other non-Apple platforms, however, onscreen contents moves in the same direction as your fingers are moving on the trackpad. As a result, dragging down on the trackpad or mouse surface makes the contents of the screen move down, and vice versa.
Need help? ask idb!
If you like this tutorial, pass it along to your friends and leave a comment below.
