近年來，在移動設備上，滑動頁面已經成為一種常見的操作。有時，為了實現某些效果，我們需要禁止用戶滑動頁面，本文將介紹如何在CSS中實現禁止滑動的效果。

body{
overflow: hidden;  /* 禁止頁面滑動 */
}

如上代碼所示，將body元素的overflow屬性設為hidden，即可禁止頁面在水平和垂直方向上的滾動。值得注意的是，這種方法在IOS上并不可靠，因為在IOS上，如果一個元素較長，瀏覽器默認會允許用戶橫向滑動并查看完整內容。

為了在IOS上禁止頁面滑動，我們還需要在JS代碼中進行一些處理，如下所示：

var lastY;  //記住上一次觸摸位置
document.addEventListener('touchstart', function (event) {
lastY = event.touches[0].clientY;
});
document.addEventListener('touchmove', function (event) {
var currentY = event.touches[0].clientY;
if (currentY >lastY) {
event.preventDefault(); // 手指向下滑動，阻止默認滾動行為
}
lastY = currentY;
});

如上代碼所示，在touchstart事件中記錄上一次觸摸位置，然后在touchmove事件中比較當前觸摸位置和上一次觸摸位置，如果手指向下滑動，就阻止默認的滾動行為。這樣，即使body元素的overflow屬性為hidden，在IOS上也能夠有效地禁止頁面滑動。

綜上所述，通過CSS和JS的配合，可以十分便捷地實現在移動設備上的禁止頁面滑動效果。