仅供参考:

  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. MySQL Disk--NAND Flash原理

    ====================================================== NAND Flash最小存储单元: 写数据操作: 通过对控制闸(Control Gate) ...

  2. C# winform 使用DsoFramer 创建 显示office 文档

    使用微软DsoFramer 组件创建,显示office 1. DsoFramer  组件的介绍 dsoframer是微软提供一款开源的用于在线编辑.调用Word. Excel .PowerPoint等 ...

  3. TensorFlow笔记-03-张量,计算图,会话

    TensorFlow笔记-03-张量,计算图,会话 搭建你的第一个神经网络,总结搭建八股 基于TensorFlow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数) ...

  4. commons-logging log4j logback 知识点

    log4j 2,需要导入2个jar包: log4j-core-xx.jar log4j-api-xx.jar log4j 2 的 properties 配置文件名字为: log4j2.properti ...

  5. hadoop家族学习路线图之hadoop产品大全

    大数据这个词也许几年前你听着还会觉得陌生,但我相信你现在听到hadoop这个词的时候你应该都会觉得“熟悉”!越来越发现身边从事hadoop开发或者是正在学习hadoop的人变多了.作为一个hadoop ...

  6. Python——包

    包 —— 把解决一类问题的模块放在同一个文件夹里 包的导入 import 和 from ... import 都行 导入之前:凡是带点的,点的左边都必须是包 导入之后:点的左边可以是包.模块.函数.类 ...

  7. 【appium】根据class_name定位元素

    目前没有尝试成功,等成功后补充 class_name=class可以通过UIAutomatorViewer获得.

  8. PHP常用函数总结(二):

    //=================图像处理=================================== //=================会话机制================== ...

  9. VS起始页不显示最近使用的项目解决方案

    前段时间换了一家公司,做ASP.NET开发,让我郁闷的是VS的起始页总是不显示最近使用项目,起先没在意,后来觉得越来越不方便了,然后本着内事不决问百度,外事不决问谷歌的态度,我就百了下~,结果还真遇到 ...

  10. Qt5布局管理(二)——QDockWidget停靠窗口类

    转载:LeeHDsniper 停靠窗口类QDockWidget 实例效果 如右图所示,左半部分MainWindow是该窗口的中心窗口,右边的最下面两个停靠窗口可以跳出该窗口: 但是第一个停靠窗口只能停 ...