我做了一个小演示，也可以在计算机浏览器和移动设备上运行..
演示： http://mediakuu.fi/mobile_demo/
将此添加到您的 html 标头以防止用户调整您网站的大小：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
为了让事情顺利进行：
完整来源：
<!DOCTYPE html>
<html>
<head>
<title>MOBILE SCROLL DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#wrapper {
position: absolute;
left: 0px;
top: 0px;
}
.section {
position: absolute;
top: 0px;
}
#section1 {
background: #226633;
}
#section2 {
background: #992211;
}
#section3 {
background: #773344;
}
#section4 {
background: #993344;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.hammer.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var
ww = 0,
wh = 0,
current_x = 0,
current_section = 0,
new_section = 0,
$wrapper = $('#wrapper');
function resizeElements() {
// Get window dimensions
ww = $(window).width();
wh = $(window).height();
// Resize sections to match window size
$(".section").css({
width : ww + 'px',
height : wh + 'px'
});
$(".section").each(function(ind) {
$(this).css({
'left': (ind * ww) + 'px'
});
});
}
// Check for window resize (user changing device orientation)..
$(window).bind('resize orientationchange', function() {
resizeElements();
});
// Resize elements once document loaded
resizeElements();
// Use plugin called hammer.js to get touch gestures
$wrapper.hammer().on("dragright dragleft dragend", function(ev) {
switch(ev.type) {
case "dragleft":
case "dragright":
//User is dragging horizontally, calculate current x from section index
current_x = 0 - (ww * current_section);
// Use transit plugin to move wrapper with CSS3 animation
$wrapper.transition({
x : current_x + parseInt(ev.gesture.deltaX)
}, 0, 'linear');
break;
case "dragend":
// User released finger. Check if dragged
// over 30% of screenwidth or if user made quick swipe..
// deltaX can be > 0 or < 0 so use abs to get positive value
if ((Math.abs(ev.gesture.deltaX) / ww) > 0.3 || ev.gesture.velocityX > 1.5) {
// Scroll to next or previous section
new_section = (ev.gesture.deltaX > 0 ? current_section - 1 : current_section + 1);
// If scrolling over section index.. scroll back to old..
if (new_section < 0 || new_section > $('.section').length-1)
new_section = current_section;
} else {
// Not scrolled that much.. animate back to old section
new_section = current_section;
}
// Calculate section x position
current_x = 0 - (ww * new_section);
// Animate wrapper to new position.. animation length 400 millisecods
// with "linear" easing..
$wrapper.transition({
x : current_x
}, 400, 'linear', function() {
// Set new section as current when animation
// completes
current_section = new_section;
});
break;
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="section" id="section1">
<p>section1</p>
</div>
<div class="section" id="section2">
<p>section2</p>
</div>
<div class="section" id="section3">
<p>section3</p>
</div>
<div class="section" id="section4">
<p>section4</p>
</div>
</div>
</body>
</html>