仅供参考:

  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. python 获取中文文件名的输出

    #coding:utf8 if __name__ == '__main__': srcfile = u"D:/测试路径/测试文件.txt" f = open(srcfile.enc ...

  2. B树就想到这个

    比如要查找60 先在根结点中查,根结点里面有 17  35这2个关键字, 60 > 35,则从右边开始查找 p3指针开始查找 ,  到了第二层的最右边的那个结点开始查找 , 里面有  65  8 ...

  3. 个人博客:有态度的HBase/Spark/BigData

    个人博客:有态度的HBase/Spark/BigData 关于我 本人范欣欣,男,就职于网易杭州研究院后台技术中心数据库技术组,专注于HBase的开发运维,热衷于MySQL等相关数据库技术.联系方式: ...

  4. Jersey RESTful Web服务

    Jersey是一个RESTFUL请求服务JAVA框架,与常规的JAVA编程使用的struts框架类似,它主要用于处理业务逻辑层.与Struts类似,它同样可以和hibernate,spring框架整合 ...

  5. JVM监控

    jconsole 说明: 首先JConsole这个是JDK里面自带的工具  在JAVA_HOME/bin目录下,今天主要测试远程监控JVM 第一步:设置好需要远程机器的Tomcat 修改Tomcat下 ...

  6. 【转】每天一个linux命令(10):cat 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内 ...

  7. c#操作xml的代码(插入节点、修改节点、删除节点等)

    bookstore.xml文件内容: 复制代码代码示例: <?xml version="1.0" encoding="gb2312"?><bo ...

  8. php 加密 解密 方法

    base64        Base64编码可用于在HTTP环境下传递较长的标识信息      base64_encode       base64_decodeserialize       可以将 ...

  9. Qt中路径问题小结

    转载:奋斗Andy 在做Qt项目的时候,我们难免遇到到文件路径问题. 如QFile file("text.txt")加载不成功.QPixmap("../text.png& ...

  10. 小峰servlet/jsp(2)

    一.jsp javaBean组件引入 <jsp:useBean id="实例化对象名称" scope="保存范围" class="类完整名称&q ...