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浏览器的兼容性设置。