JS禁止滾動的實現方式

一、JS禁止滾動事件

在開發一些特殊的頁面時，我們可能希望頁面不隨滑鼠滾輪的滾動而滑動，這時我們可以使用JS禁止滾動事件來實現。下面是禁止滑鼠滾輪事件的代碼：

document.addEventListener('mousewheel', function(e) {
   e.preventDefault();
},{passive: false});

該代碼中，我們使用addEventListener方法對mousewheel事件進行監聽，然後傳入一個回調函數，在回調函數中使用e.preventDefault()方法阻止默認的滾輪事件。其中，{passive: false}是參考Chrome瀏覽器的兼容性設置。

二、JS滾動條自動滾動

在一些需要自動滾動的場景中，我們可以使用JS來實現自動滾動效果。下面是使用JS自動實現滾動條自動向下滾動的代碼：

var scrollHeight = 0;
function autoScroll() {
   var scroll = document.getElementById('scroll');
   scroll.scrollTop += 1;
   scrollHeight = scroll.scrollHeight - scroll.offsetHeight;
   if (scroll.scrollTop < scrollHeight) {
       setTimeout(autoScroll, 25);
   }
}
setTimeout(autoScroll, 1000);

該代碼中，我們首先通過getElementById方法獲取到需要自動滾動的元素，然後在autoScroll方法中對滾動條scrollTop屬性進行修改，從而實現滾動。最後，我們使用setTimeout方法來調用autoScroll方法，從而實現自動滾動的效果。

三、JS禁止滾動條滾動

在一些特定的場景中，我們可能需要禁止頁面的滾動條滾動。下面是禁止滾動條滾動的代碼：

var scrollTop;
function noScroll() {                                                                                    
    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;                         
    document.body.style.cssText += 'position:fixed;width:100%;top:-'+scrollTop+'px;';                    
}

function returnScroll() {                                                                                
    document.body.style.position = '';                                                                    
    document.body.style.top = '';                                                                         
    document.documentElement.scrollTop = scrollTop;                                                      
}

該代碼中，我們首先定義了noScroll方法和returnScroll方法，noScroll方法用于禁止滾動，returnScroll方法用於恢復滾動。在禁止滾動時，我們通過修改body的css樣式來實現，具體是將position設為fixed，將top設為當前滾動條的位置。在恢復滾動時，我們只需要將position和top設為原來的值即可。

四、JS無縫滾動

在一些需要展示多條信息的場景中，我們可以使用JS實現滾動通知的效果。下面是使用JS實現無縫滾動效果的代碼：

var speed = 50,
    scrollBegin = document.getElementById('scrollBegin'),
    scrollEnd = document.getElementById('scrollEnd'),
    scrollArea = document.getElementById('scrollArea');

scrollEnd.innerHTML = scrollBegin.innerHTML;

function scrollUp() {
    if (scrollEnd.offsetTop - scrollArea.scrollTop <= 0) {
        scrollArea.scrollTop -= scrollBegin.offsetHeight;
    } else {
        scrollArea.scrollTop++;
    }
}

var timer = setInterval(scrollUp, speed);

scrollArea.onmouseover = function() {
    clearInterval(timer);
};

scrollArea.onmouseout = function() {
    timer = setInterval(scrollUp, speed);
};

該代碼中，我們首先通過定義speed、scrollBegin、scrollEnd、scrollArea等變數來獲取需要操作的元素。然後，我們將scrollBegin的innerHTML賦值給scrollEnd，從而實現內容的無縫滾動。接著，我們使用setInterval方法來定時調用scrollUp方法，實現scrollTop的修改，從而實現滾動的效果。最後，我們監聽mouse事件，通過clearInterval和重新調用setInterval來實現滾動的停止和恢復。

五、JS滾動到底部

在一些需要載入大量數據的場景中，我們可能需要將頁面滾動到底部。下面是使用JS滾動到底部的代碼：

var box = document.getElementById('box');
box.scrollTop = box.scrollHeight;

該代碼中，我們首先獲取到需要滾動的元素，然後將scrollTop設置為scrollHeight，從而實現將頁面滾動到底部的效果。

六、JS滾動到指定位置

在一些需要錨點跳轉的場景中，我們可能需要將頁面滾動到指定位置。下面是使用JS滾動到指定位置的代碼：

var anchor = document.getElementById('anchor');
anchor.onclick = function() {
    document.documentElement.scrollTop = document.getElementById('target').offsetTop; 
};

該代碼中，我們首先獲取到需要滾動的目標元素，然後在點擊事件中對documentElement的scrollTop進行修改，從而實現將頁面滾動到指定位置的效果。

七、JS自動滾動列表

在一些需要不斷滾動的列表場景中，我們可以使用JS實現自動滾動效果。下面是使用JS自動滾動列表的代碼：

var scrollTop = 0,
    newsList = document.getElementById('newsList');

function autoScroll() {
    scrollTop++;
    if (scrollTop >= newsList.scrollHeight - newsList.offsetHeight) {
        scrollTop = 0;
        newsList.scrollTop = scrollTop;
    } else {
        newsList.scrollTop = scrollTop;
    }
}

var timer = setInterval(autoScroll, 50);

newsList.onmouseover = function() {
    clearInterval(timer);
};

newsList.onmouseout = function() {
    timer = setInterval(autoScroll, 50);
};

該代碼中，我們首先定義了scrollTop、newsList等變數來獲取需要操作的元素。然後，我們使用setInterval方法來定時調用autoScroll方法，實現scrollTop的修改，從而實現自動滾動的效果。最後，我們監聽mouse事件，通過clearInterval和重新調用setInterval來實現滾動的停止和恢復。

八、JS禁止頁面滾動

在一些需要禁止頁面滾動的場景中，我們可以使用JS實現禁止頁面滾動的效果。下面是使用JS禁止頁面滾動的代碼：

var scrollFunc = function(event) {
    event.preventDefault();
}

document.addEventListener('touchmove', scrollFunc, {passive:false});
document.addEventListener('mousewheel', scrollFunc, {passive:false});

該代碼中，我們使用addEventListener方法來對touchmove事件和mousewheel事件進行監聽，然後傳入一個回調函數，在回調函數中使用event.preventDefault()方法阻止默認的滾動事件。其中，{passive: false}是參考Chrome瀏覽器的兼容性設置。