博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
子元素scroll父元素容器不跟随滚动JS实现
阅读量:6587 次
发布时间:2019-06-24

本文共 923 字,大约阅读时间需要 3 分钟。

$.fn.scrollUnique = function() {    return $(this).each(function() {        var eventType = 'mousewheel';        if (document.mozHidden !== undefined) {            eventType = 'DOMMouseScroll';        }        $(this).on(eventType, function(event) {            // 一些数据            var scrollTop = this.scrollTop,                scrollHeight = this.scrollHeight,                height = this.clientHeight;            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);                    if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {                // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位                this.scrollTop = delta > 0? 0: scrollHeight;                // 向上滚 || 向下滚                event.preventDefault();            }                });    });    };$('#test').scrollUnique();

本文转自 张鑫旭的文章

转载地址:http://mohno.baihongyu.com/

你可能感兴趣的文章
Android 4.0以上设备虚拟按键中显示Menu键
查看>>
Xcode 创建自定义模板
查看>>
PHP之内置web服务器
查看>>
程序员的小技能,1行代码修改开机密码、1张图片让你电脑死机
查看>>
spring framwork解析
查看>>
吸猫就吸Tomcat之Pipeline-Valve巧妙设计
查看>>
分析JQ作者的类实现过程
查看>>
Uranus Ex通过完善自身,影响更广阔的金融衍生品市场
查看>>
[smali] This Handler class should be static or leaks might occur
查看>>
由canvas实现btn效果有感
查看>>
对于原型链的彻底理解
查看>>
父组件和子组件同是使用 beforeDestroy 钩子 保存同一份数据
查看>>
基于better-scroll实现的类似ios选择器
查看>>
个人经验-项目命名规范
查看>>
[译]理解 Node.js 事件驱动架构
查看>>
01-执行上下文与变量对象
查看>>
React Native在Android当中实践(一)——背景介绍
查看>>
module.exports与exports,export与export defa
查看>>
linux常用shell命令之文件操作命令
查看>>
Botanical Dimensions:借助第九代智能英特尔® 酷睿™ 处理器实现独特沉浸式体验...
查看>>