Javascript smooth scrolling iPad
I am using this code, scroll div overflow (hidden) in ipad and it works expecting it not to be smooth, is there a way to make it smooth scrolling?
function initMobileScroll(ele) {
var mobileScrollArea = document.getElementById(ele);
mobileScrollArea.addEventListener('touchstart', function(event){
touchstart (event);
});
mobileScrollArea.addEventListener('touchmove', function(event){
touchmove (event);
});
// let’s set the starting point when someone first touches
function touchstart (e) {
startY = e.touches[0].pageY;
startX = e.touches[0].pageX;
}
// calls repeatedly while the user’s finger is moving
function touchmove(e) {
var touches = e.touches[0];
// override the touch event’s normal functionality
e.preventDefault();
// y-axis
var touchMovedY = startY - touches.pageY;
startY = touches.pageY; // reset startY for the next call
mobileScrollArea.scrollTop = mobileScrollArea.scrollTop + touchMovedY;
// x-axis
var touchMovedX = startX - touches.pageX;
startX = touches.pageX; // reset startX for the next call
mobileScrollArea.scrollLeft = mobileScrollArea.scrollLeft + touchMovedX;
}
}
code source: http://www.flexmls.com/developers/2011/04/13/ipad-and-single-finger-scrolling-in-flexmls/
+3
source to share
4 answers
Smooth Scrolling Div now supports touch scrolling. It's free and works the same way as you describe - it scrolls a div inside another div with an overflow hidden.
+1
source to share
It looks like what I was trying to do. Good luck.
if (evt.type == "touchstart")
{
tsStartY = evt.originalEvent.changedTouches[0].clientY;
}
if (evt.type == "touchend")
{
var te = evt.originalEvent.changedTouches[0].clientY;
var delta = tsStartY - te;
if (tsStartY > te) {
// going down
this.transY += delta;
if (this.transY > this.minY)
{
this.transY = this.minY;
}
}
if (tsStartY < te)
{
// going up
this.transY -= -delta;
if (this.transY < this.maxY) {
this.transY = this.maxY;
}
}
}
+1
source to share