禁用滚动但使用JavaScript捕获滚动数据?

我正在尝试阻止默认滚动行为,同时仍然确定用户尝试滚动的像素数.

我的目标是(在我的页面上的某个垂直位置)将导航元素固定到屏幕顶部并劫持滚动/滑动事件以在用户向上滚动时拉下移动菜单(因此上下移动所述元素) n个像素,取决于用户尝试滚动的像素数).

我知道在阻止原生行为方面存在的用户体验/可访问性问题,但这些诉讼需要西装想要的东西.

到目前为止,我有:

$('body').on({
 'mousewheel' : function(e) {
    e.preventDefault(); 
    e.stopPropagation();
 }
});

但我很难知道如何访问滚动的像素数(因为元素/滚动偏移不再是指南).

编辑:请注意,此问题专门询问滚动被阻止时有关鼠标/滚动操作的信息.不要认为这已被适当标记为重复.

解决方法

由于您使用的鼠标滚轮事件,这是浏览器所依赖的.这是因为它是 non-standard.不要使用它!

在Chrome(43.0)中,您可以获得具有不同值的不同属性:

e.originalEvent.wheelDelta: -120
e.originalEvent.wheelDeltaY: -120
e.originalEvent.deltaY: 100

在IE(11.0)中,您只能获得一个属性:

e.originalEvent.wheelDelta: -120

在Firefox(38.0.5)中,捕鼠轮事件根本不起作用.

解:
使用滚轮事件(MDN reference).此事件在所有浏览器中都具有e.originalEvent.deltaY属性.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)