仅供参考:

  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. jquery遍历节点 children(),next(),prev(),siblings()closest() 等一些常用方法...

    函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 返回被选元素旗下的所有直接子元素 .closest() ...

  2. 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(二)-- Web Api Demo

    在上一篇里,我已经建立了一个简单的Web-Demo应用程序.这一篇将记录将此Demo程序改造成一个Web Api应用程序. 一.添加ASP.NET Core MVC包 1. 在project.json ...

  3. Vue中的“混合”——mixins使用方法

    混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...

  4. vue-meta

    vue-meta插件的使用: https://github.com/declandewet/vue-meta

  5. 罗技 M558 鼠标维修记录

    罗技 M558 鼠标维修记录 故障现象 按键不灵敏 拆机内部图 前进键 后退键 左键 右键 中键 自定义功能键 使用的是 OMRON 按键,好东西,质量可以. 但毕竟是机械的东西,还是有老化,用万用表 ...

  6. Oracle数据泵的使用

    几乎所有DBA都熟悉oracle的导出和导入实用程序,它们将数据装载进或卸载出数据库,在oracle  database 10g和11g中,你必须使用更通用更强大的数据泵导出和导入(Data Pump ...

  7. 自定义django model form、admin action

    https://www.cnblogs.com/0zcl/archive/2017/03/22/6580279.html 先看效果图: 登陆admin后的界面: 查看作者: 当然你也可以定制admin ...

  8. 创建mysql 用户并限定其操作主机 和 数据库

    参考链接 http://www.cnblogs.com/top5/archive/2010/09/14/1825571.html ******** GRANT ALL ON push.* TO pus ...

  9. ASP.NET Web API 全局权限和异常处理

    转自:http://yangpei.appsp0t.com/post/aglzfnlhbmdwZWlyDAsSBUVudHJ5GLkXDA 正文之前先解决一个问题 Web Api XML序列化的问题 ...

  10. SpringCloud统一配置笔记

    Server端: pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...