仅供参考:

  function parentNotRoll($id){
var flg;//标记滚动方向,true-向下,false-向上
var $test = document.getElementById($id);
var eventType = 'mousewheel';
// 火狐是DOMMouseScroll事件
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
myAddEvent($test,eventType,getData);
function getData(event){
var e = event || window.event;
var scrollHeight = $test.scrollHeight,//元素的全部高度,包括滚动条高度
height = $test.clientHeight,//元素设置的高度
maxHeight = scrollHeight - height,//滚动条可以滚动最大高度
scrollTop = $test.scrollTop;//滚动条的高度
var delta = e.wheelDelta?e.wheelDelta:e.detail;
if(delta < - || delta ==){
flg = true;
}else
if(delta > || delta == -){
flg = false;
}
//判断当滚动向下,并且滚动到边界,就阻止浏览器默认行为,否则就取消阻止默认行为
if(flg && scrollTop >= maxHeight || !flg && scrollTop <= ){
stopDefault();
}
} //兼容绑定事件方法
function myAddEvent(ele,sEvent,getData){
if(ele.addEventListener && !ele.attachEvent){//非IE
ele.addEventListener(sEvent,getData);
}else{//IE
if(document.attachEvent && !document.addEventListener){ //IE8以
ele.attachEvent('on'+sEvent,getData);
}else{ //IE8以上
ele.addEventListener(sEvent,getData);
}
}
}
//阻止默认浏览器动作
function stopDefault(){
var e = arguments.callee.caller.arguments[] || window.event;
if (e.preventDefault){//非IE
e.preventDefault();
//IE中阻止函数器默认动作的方式
} else{//IE
e.returnValue = false;
}
return false;
}
}

调用 parentNotRoll();函数,传入你需要实现滚动的元素ID或类即可实现

 parentNotRoll('test');

子元素scroll父元素容器不跟随滚动JS实现的更多相关文章

  1. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  2. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  3. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  4. WPF XMAL获取元素的父元素,子元素

    /// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...

  5. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  6. margin (子元素远离父元素边框)

    如果父盒子没有设置border框着,那么他的子元素无法利用margin-top 来远离父元素的上边框 如果使用了margin-top会使子元素和父元素一起往下移 (子想离,父不设置border边框 则 ...

  7. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  8. 让子元素在父元素中水平居中align-items

    做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...

  9. justify-content 定义子元素在父元素水平位置排列的顺序

    justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值)  左对齐 2.flex-end 右 ...

随机推荐

  1. idea_快捷键default&eclipse

    关键字: SpringMybatisplusRedisApplicationTests github关键字(springboot拦截器完整项目): implements WebMvcConfigure ...

  2. string str将str转字符数组以及字符数组初始化

    c和指针(<pointers on c>) 8.1.11 一个字符串,如"hello",一般为字符串常量,可以用它对字符指针赋值,或初始化,相当于把这个字符串常量的首地 ...

  3. Understanding Safari Reader

    Interesting enough to find out the Reader function in Safari is actually Javascript and there are ma ...

  4. SELENIUM如何调用FIREFOX时加载插件

    当selenium调用firefox时,会发现这个firefox里干净的如同一盆清水,自己定制安装的那些插件都不翼而飞了,这个时候那些插件自然就不能使用了,但是当前又必须使用插件该如何是好呢? 解决办 ...

  5. java.lang.BootstrapMethodError: java.lang.NoClassDefFoundError: scala/runtime/java8/JFunction1$mcII$sp

    报错信息: Exception in thread "main" java.lang.BootstrapMethodError: java.lang.NoClassDefFound ...

  6. ionic3之自定义tabs菜单图标

    请参考以下链接 ionic3之自定义tabs菜单图标

  7. ipconfig出现window IP configuration 。。

    我的电脑  右击 -->属性 ---->硬件---->设备管理器 安装以太网网卡 1.自动  电脑重新开机会自动提示安装 2.手动  下载以太网网卡驱动 ,选中合适类型(一般为int ...

  8. 专访TK教主于旸:原来那些搞安全的说的都是真的(图灵访谈)

    引用:http://www.ituring.com.cn/article/196609 于旸,网名“tombkeeper”,在国内黑客界被尊称为“TK教主”,现任腾讯玄武实验室总监.于旸从事信息安全研 ...

  9. 实际用户ID和有效用户ID (一) *****

    在Unix进程中涉及多个用户ID和用户组ID,包括如下: 1.实际用户ID和实际用户组ID:标识我是谁.也就是登录用户的uid和gid,比如我的Linux以simon登录,在Linux运行的所有的命令 ...

  10. C# 在引用插件中 出现的问题| Csharp cite the plugin problem

    背景:使用C#操纵鼠标进行重复性的工作 background: using Csharp to handle the keyboard or mouse to do the repetitive wo ...