HTML iOS 上下滑動效果代碼

/* CSS 部分 */
body {
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* JS 部分 */
var container = document.querySelector('.container');
container.addEventListener('touchstart', function(e) {
// 記錄開始觸摸位置
this.startY = e.targetTouches[0].pageY;
// 記錄開始滾動位置
this.startScrollTop = this.scrollTop;
});
container.addEventListener('touchmove', function(e) {
// 阻止默認事件，避免 iOS 上面的 bounce 效果
e.preventDefault();
var deltaY = e.targetTouches[0].pageY - this.startY;
this.scrollTop = this.startScrollTop - deltaY;
});

解析：

上述代碼實現了一個 iOS 上下滑動效果，即類似于 Safari 瀏覽器上面的滑動效果。首先，在 CSS 部分，我們將 body 元素的 overflow 屬性設置為 hidden，然后對包含內容的容器添加了一個類名為 .container 的元素，并將其高度設置為 100%，并啟用了 overflow-y 屬性來添加縱向滾動條。此外，-webkit-overflow-scrolling 屬性還啟用了 iOS 上面的平滑滾動效果。

在 JS 部分，我們使用了一個 touchstart 和 touchmove 事件來實現上下滑動的效果。當觸摸開始的時候，我們記錄了開始觸摸的位置和開始滾動的位置，然后在 touchmove 事件中，我們阻止了默認事件，并且通過計算觸摸點與起始點的偏移量來調整滾動條的位置。

總之，上述代碼非常簡單，卻可以為你在移動端開發中提供更好的用戶體驗。