仅供参考:

  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. js 每隔四位加一个空格

    var str = '2016060520103600466'; var str=str.replace(/\s/g,'').replace(/(.{4})/g,"$1 "); a ...

  2. yugabyte 集成JanusGraph测试

    yugabyte 集成图数据库JanusGraph,原理比较简单就是yugabyte 内置Cassandra,配置好JanusGraph 的访问就可以了. 使用docker 模式部署 创建yugaby ...

  3. 在Win7下新建库并修改图标

    win7中在库中添加桌面方法详解 1.在空白处,鼠标右键选择新建——库. 2.命名为桌面,然后选择桌面. 3.鼠标右键选择属性. 4.点击包括文件夹. 5.选择桌面,点击包括文件夹按钮. 6.点击确定 ...

  4. RAC7——vip的理解

    VIP特点: 1 VIP是在clusterware安装最后阶段,通过脚本VIPCA创建的: 2 VIP作为一个Nodeapps类型的CRS Resource注册到OCR中,并由CRS维护状态: 3 V ...

  5. Django模板语言(常用语法规则)

    Django模板语言 The Django template language 模板中常用的语法规则 {最新版本的Django语法可能有改变,不支持的操作可能支持了.[HTML教程 - 基本元素/标签 ...

  6. Angular 4 http通讯 解决服务器参数无法接收问题

    1.导入 import { Component, OnInit } from '@angular/core'; import {Observable} from 'rxjs/Observable'; ...

  7. java jni 调用c++ opencv代码成功范例

    java上建立接口定义 package com.dtk; public class Rec { public native String RecImage(String src); public st ...

  8. BASIC-8_蓝桥杯_回文数

    示例代码: #include <stdio.h> int main(void){ int i = 0 ; int a = 0 , b = 0 , c = 0 , d = 0 ; for ( ...

  9. ICE简介及C++程序例子(转)

    一.ICE简介: 1.ICE是什么? ICE是ZEROC的开源通信协议产品,它的全称是:The Internet Communications Engine,翻译为中文是互联网通信引擎,是一个面向对象 ...

  10. 术语-软件-软件开发:SDK(软件开发工具包)

    ylbtech-术语-软件-软件开发:SDK(软件开发工具包) 软件开发工具包(缩写:SDK.外语全称:Software Development Kit)一般都是一些软件工程师为特定的软件包.软件框架 ...