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;
  }
}

恢复键盘控制滚动条滚动

document.body.onkeydown = function (e) {
  if (e.keyCode == 38 || e.keyCode == 40) {
     return true;
  }
}

css隐藏滚动条样式:

::-webkit-scrollbar {
   overflow-x:hidden;
}

原文地址:https://www.cnblogs.com/maohuidong/p/12548876.html

时间: 2024-10-27 13:30:10

js禁止滚动条滚动并且隐藏滚动条的相关文章

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

最近写一个类似土豆播放器选集数的滚动条,需要的效果是当鼠标位于选择集数的div中时只能滚动该div的滚动条,但是浏览器滚动条禁止滚动~ 网站找了很多方法都是直接隐藏滚动条,最终找到下面方法 代码: var keys = [37, 38, 39, 40]; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } fun

原生js禁止页面滚动

// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处理程序中不生效. }, // 开启滚动 open() { document.body.removeEventListener('touchmove', this.e, false); }, // 禁止滚动 close() { document.body.addEventListener('touch

js制作列表滚动(有滚动条)

function mouseWheel(obj, fn){ var ff = navigator.userAgent.indexOf("Firefox"); if (ff != -1) { obj.addEventListener("DOMMouseScroll", wheel, false); }else{ obj.onmousewheel = wheel; } function wheel(event){ var event = event || window.

css 之内容溢出滚动,隐藏滚动条

解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overflow: hidden; } .inContainer { height:300px; width: 367px; overflow-x:hidden; overflow-y:scroll; } 2.设置 scrollbar-width: none,可兼容 .outContainer { width

js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿.等待监听器的执

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

js禁止滚动条移动

var scrollFunc=function(e){ e=e||window.event; if (e&&e.preventDefault){ e.preventDefault(); e.stopPropagation(); }else{ e.returnvalue=false; //return false; } } js通过隐藏滚动条禁止其移动 document.body.parentNode.style.overflow = “hidden";//隐藏且禁用横向纵向两个滚

原生js判断某个区域的滚动条滚动到了底部

原生js判断某个区域的滚动条滚动到了底部 讲解==> 关系公式:element.scrollHeight - element.scrollTop === element.clientHeight 解释:此公式可以用于判断是否滚动到底 你必须知道这个方法 可以判断滚动条滚动到了底部哈! element.scrollHeight 是获取这个元素区域的实际高度(包含被隐藏起来的高度) element.scrollTop是获取滚动条距离顶部的实际距离(包含被隐藏起来的高度) element.client

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,