禁止浏览器滚动条滚动,但滚动条可以显示

最近写一个类似土豆播放器选集数的滚动条,需要的效果是当鼠标位于选择集数的div中时只能滚动该div的滚动条,但是浏览器滚动条禁止滚动~

网站找了很多方法都是直接隐藏滚动条,最终找到下面方法

代码:

var keys = [37, 38, 39, 40];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener(‘DOMMouseScroll‘, wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener(‘DOMMouseScroll‘, wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}

  

代码测试:

禁止浏览器滚动条滚动 允许浏览器滚动条滚动

时间: 2024-12-15 01:32:57

禁止浏览器滚动条滚动,但滚动条可以显示的相关文章

(转)CSS 禁止浏览器滚动条的方法

1.完全隐藏 在里加入scroll="no",可隐藏滚动条: 这个我用的时候完全没效果,不知道是什么原因!不过好多人说这么用可以,大概是用的位置不一样吧 2.在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条:反之,则显示: 3.样式表方法 在里加入style="overflow-x:hidden",可隐藏水平滚动条:加入style="overflow-y:hidden",可隐藏垂直滚动条. 被包含页面里加入 html {

js 禁止|阻止滚动条滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Ty

div固定在浏览器的最上方,不随滚动条滚动

1 #topDIV { 2 position: fixed; 3 top: 0; 4 z-index: 10000; 5 width: 100%; 6 height: 35px; 7 border-bottom: 1px solid #eee; 8 background-color: #f5f5f5; 9 } 把div固定在浏览器的最上方,不随滚动条滚动,类似百度.淘宝的上方.

js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如果时间内又执行了该操作则延长时间重新开始计算 /* 不做处理input触发keyup事件 */ /* 输入快的话会出现输出结果多次重复 */ window.onload = function () { let obj = document.getElementById('input') obj.ad

浏览器滚动条滚动

1.浏览器滚动条滚动到页面顶部 document.body.scrollTop = 0 2.浏览器滚动条滚动到页面底部 document.body.scrollTop = document.body.scrollHeight 原文地址:https://www.cnblogs.com/wpp281154/p/11356498.html

js禁止滚动条滚动并且隐藏滚动条

禁止鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return false;} 恢复鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return true;} 禁止键盘控制滚动条滚动 document.body.onkeydown = function (e) {   if (e.keyCode == 38 || e.keyCode == 40) {    return false;

ios移动端原生滚动条滚动不灵敏问题

最近开发微信页面的时候遇到了这个问题, 因为移动端浏览器的原生滚动条样式很好,不像pc端那么难看,所以在页面需要滚动的地方用了原生的滚动条,这种滚动条在安卓浏览器中没有任何问题,但是在ios微信浏览器还是自带浏览器中都会反应迟钝,很难滑动,有的地方干脆不能滑,用户体验很垃圾,查了一些资料后, 找到了这个属性 -webkit-overflow-scrolling : touch; 然后把他加在overflow:auto:处, 完美解决了问题, 使得ios 滚动条的响应速度甚至超过了安卓, 感受只有

设置DIV随滚动条滚动而滚动

有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml&quo

【webQD】☆★之固定DIV不随滚动条滚动

[webQD]☆★之固定DIV不随滚动条滚动 在项目开发中,有的页面的某些按钮,我们是不想让他跟着滚动条滚动的,比如,添加页面,有很长的内容添加,在往下滚动添加的过程中,我们始终想看到保存按钮.OK! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>