Sử dụng ví dụ từ fiddle thứ hai của bạn như một sự khởi đầu, bạn có thể làm điều này:
//From the fiddle
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
setup: function() {
var thisObject = this;
var $this = $(thisObject);
$this.bind(touchStartEvent, function(event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(event.target)
},
stop;
function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};
// prevent scrolling
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
event.preventDefault();
}
}
$this
.bind(touchMoveEvent, moveHandler)
.one(touchStopEvent, function(event) {
$this.unbind(touchMoveEvent, moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
start.origin
.trigger("swipeupdown")
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
}
}
start = stop = undefined;
});
});
}
};
$.each({
swipedown: "swipeupdown",
swipeup: "swipeupdown"
}, function(event, sourceEvent){
$.event.special[event] = {
setup: function(){
$(this).bind(sourceEvent, $.noop);
}
};
});
Và sau đó thêm
$('.scrollbar').on('swipedown', function(){
var SCROLL_FRACTION = 3;
var height = document.body.scrollHeight;
var width = document.body.scrollWidth;
scrollTo(width, height - height/SCROLL_FRACTION);
});
$('.scrollbar').on('swipeup', function(){
var SCROLL_FRACTION = 3;
var height = document.body.scrollHeight;
var width = document.body.scrollWidth;
scrollTo(width, height + height/SCROLL_FRACTION);
});
Và sau đó bạn chỉ có thể thay đổi SCROLL_FRACTION
để bất cứ điều gì phần của trang bạn muốn cuộn khi vuốt.
Tại sao bạn phải lo lắng về các thanh cuộn trên thiết bị di động? Toàn bộ vấn đề là tự nhiên chỉ cần vuốt - thanh cuộn quá nhỏ để chúng tôi có thể sử dụng bằng ngón tay/ngón tay cỡ trung bình –
@DarrenSweeney Tôi đang sử dụng ứng dụng cung cấp cho tôi tệp html và tôi phải bao gồm nó
Tôi đã thử iscroll (http://cubiq.org/iscroll-5) hoặc các thanh cuộn bằng văn bản khác nhưng tôi không thể sử dụng chúng VỚI iframe –