Javascript平滑滚动iPad
Javascript smooth scroll iPad
我使用这个代码,要在ipad中滚动溢出的div(隐藏),并且工作人员希望它不平滑,有什么方法可以让它平滑滚动吗?
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;
}
}
代码源:http://www.flexmls.com/developers/2011/04/13/ipad-and-single-finger-scrolling-in-flexmls/
将其添加到您的css中:
-webkit-overflow-scrolling: touch;
兼容性
Safari:iOS 5
安卓浏览器:3.0
黑莓浏览器:6
Chrome手机版
Firefox Mobile
IE Mobile:9
Opera Mobile
示例:JSfiddle
参考:barrow.io-溢出滚动
看看这个:http://cubiq.org/iscroll-4
看起来和我想做的很相似。祝好运
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;
}
}
}
相关文章:
- jquery scrollTO iPhone/iPad没有't向右滚动
- 在iPad Web App上拖放 - 同时保留滚动功能
- 拖动滚动触摸设备,如手机/ iPad
- iPad 无法在具有 JavaScript UI 可拖动页面的页面上滚动
- 一页滚动iPad触摸滚动
- iPad 上的 jquery 滚动问题
- 防止在 iPad HTML5 广告上滑动滚动
- Javascript平滑滚动iPad
- 只在iPad上显示滚动错误
- 如何使工作jquery"“滑动”;在iPad上滚动
- Javascript/CSS禁用iPad上Safari的橡皮筋页面末尾滚动
- 在iPad和iPhone上滚动iframe
- 触摸iPad上的滚动增量值
- 启用/禁用iPhone/iPad的滚动,但启用网站滚动
- 使用javascript滚动在Ipad上不能快速运行
- 一页滚动插件不工作的滑动滚动在ipad上
- 如何在iPad上禁用模态蒙版后面的滚动
- 在iPad/iPhone上滚动时获取scrollTop()
- 禁用iPad滚动网页
- iPad 滚动 - 滚动期间触发哪些事件