【美高梅开户网址】子元素scroll父成分容器不跟随滚动JS达成,jQuery插件编写

子成分scroll父成分容器不跟随滚动JS实现

2015/12/18 · JavaScript
· 滚动

原来的书文出处:
张鑫旭   

① 、开场暖身

网上海人民广播电视台泛蹲来蹲去的小段子,比方说:“李代沫蹲,李代沫蹲,李代沫蹲完黄海波蹲;南海波蹲,莫桑比克海峡波蹲,南海波蹲完石钟山蹲;王海鸰蹲,张成功蹲,刘恒蹲完张耀扬先生蹲;张耀扬(Zhang Yaoyang)蹲,张耀扬先生蹲,张耀扬先生蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完……”。应该源自“萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲……”。

在网页中,滚动条的滚动行为也是接近的论调,倘诺页面出现八个内嵌滚动条,则行为表现是:子成分滚,子成分滚,子成分滚完父元素滚;父成分滚,父成分滚,父成分滚完容器滚……

比方说下边:

美高梅开户网址 1

在表嫂脸上滚,先是妹子滚,妹子滚完主页面滚,对吧~

//zxx: 别问何故不应用张含韵(Zhang Hanyun),因为张妹子照片是横的,滚动空间小,晓得伐【美高梅开户网址】子元素scroll父成分容器不跟随滚动JS达成,jQuery插件编写。~

那是浏览器的暗中认可行为,如果大家相遇了三个须要:子成分滚,子成分滚完,就完了,父成分不供给滚了。那该怎么贯彻啊?

在PC端,OK,本文介绍的艺术,值适用于PC端,移动端,咳咳,笔者15年就没做过活动端项目,倒霉意思,手生,小编也没去切磋。

小tip: 子成分scroll父成分容器不跟随滚动JS达成

正文地址(转发):

第三来学学五个函数

今天在网上找来了响应滚轮的函数并改写成上面包车型大巴类

② 、阻止浏览器私下认可行为的一定套路

哈哈,本文标题某个别扭,实际上用一句话总结就是:怎么样堵住浏览器的暗中认可滚动行为。

大多,好像影像中就平素不例外的,阻止浏览器的私下认可行为,就一条(假诺事件目的参数是event):event.preventDefault().

那是标准规范使用方法。不过,对于老IE浏览器,event.returnValue = false.
假设你使用jQuery等框架,直接上边包车型客车event.preventDefault()就能够,库已经帮您消除了异常细节处理。

OK,回到本文。阻止默许滚动,也是看似,关键是找到确切的风浪。

率先反应是scroll事件,不清楚是或不是自笔者测试的措施不对,结果没鸟用;其实想想也足以知晓,scroll事件要接触,尼玛必须已经滚动了哈~

新兴,发现要从滚动事件的源头处理起来。在PC端,绝大多数轮转都以鼠标滚动触发的(上下神速键也得以滚动页面,但貌似人不知道),因而,大家得以从鼠标滚轮事件入手。

① 、开场暖身

网上海人民广播电视台湾大学蹲来蹲去的小段子,比方说:“李代沫蹲,李代沫蹲,李代沫蹲完阿蒙森海波蹲;波罗的海波蹲,南海波蹲,南海波蹲完陈岚蹲;白一骢蹲,高满堂蹲,周振天蹲完张耀扬(Zhang Yaoyang)蹲;张耀扬(Zhang Yaoyang)蹲,张耀扬先生蹲,张耀扬先生蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完……”。应该源自“萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲……”。

在网页中,滚动条的轮转行为也是看似的论调,假诺页面出现三个内嵌滚动条,则行为表现是:子成分滚,子成分滚,子成分滚完父成分滚;父成分滚,父成分滚,父成分滚完容器滚……

比方说下边:

美高梅开户网址 2

在二嫂脸上滚,先是妹子滚,妹子滚完主页面滚,对啊~

//zxx:
别问为何不选用张含韵(Zhang Hanyun),因为张妹子照片是横的,滚动空间小,晓得伐~

那是浏览器的暗中同意行为,借使我们碰到了3个须要:子成分滚,子成分滚完,就完了,父成分不须要滚了。那该怎么兑现吗?

在PC端,OK,本文介绍的点子,值适用于PC端,移动端,咳咳,作者15年就没做过活动端项目,不佳意思,手生,小编也没去研究。

补偿于次日
挪动端的处理,能够瞻仰@hacke2的那篇文章:“在运动端上利用原生滑屏化解方案”

  1. $.extend(desc,src1,src2,src3…..)
    这是最简易正是背后的指标及质量覆盖合并到desc中并回到
  2. $.fn.extend(src)
    那是扩充jQuery实例对象的艺术,后续介绍
  3. $.extend()
    那是扩张jQuery全局方法,后续介绍
  4. $.extend(boolean,dest,src1,src2,src3….)
    其一和第②个类似,boolean为true时,深拷贝的趣味就是性质为对象的话,里面属性会覆盖合并,
    而boolean为false时,属性为对象的话,前面包车型地铁该属性只是会覆盖,而不会考虑内层的属性
    详细链接:美高梅开户网址,http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

复制代码 代码如下:

③ 、鼠标滚轮事件

JS基础知识的呐,mousewheel事件:

dom.onmousewheel = function() { // 嘿嘿嘿 };

1
2
3
dom.onmousewheel = function() {
    // 嘿嘿嘿
};

IE, Chrome都认得,可是FireFox浏览器,要使用DOMMouseScroll,
具体知识呢作者前面有写过作品分析过:“JS滚轮事件(mousewheel/DOMMouseScroll)明白”。以后向后看看那篇小说,内容和点都挺好。不过,当时刚辛亏求学模块化开发,以及JavaScript语言格局,所以,提供的代码,科科,不是拿来主义的论调,所以那篇小说没有火啊~

扯远了,同理可得吧,我们对鼠标滚动那么些事件,举办event.preventDefault(),页面就如齿轮卡壳了同等,滚不动了!

贰 、阻止浏览器私下认可行为的一定套路

哈,本文标题有个别别扭,实际上用一句话总结正是:如何堵住浏览器的暗中同意滚动行为。

大抵,好像印象中就从未两样的,阻止浏览器的暗中同意行为,就一条(尽管事件目的参数是event):event.preventDefault().

那是标准规范使用情势。不过,对于老IE浏览器,event.returnValue = false.
假若你利用jQuery等框架,直接下边包车型地铁event.preventDefault()就足以,库已经帮你化解了协作细节处理。

OK,回到本文。阻止私下认可滚动,也是近乎,关键是找到准确的事件。

第壹反响是scroll事件,不精通是还是不是自我测试的法子不对,结果没鸟用;其实想想也得以领略,scroll事件要接触,尼玛必须已经滚动了哈~

新生,发现要从滚动事件的源头处理起来。在PC端,绝大部分滚动都是鼠标滚动触发的(上下快捷键也能够滚动页面,但一般人不亮堂),由此,大家能够从鼠标滚轮事件出手。

正规启幕

1、$.fn.extend jQuery对象函数
写四个拖拽

  $(function () {
        $.fn.extend({
            drag:function() {
                //this jQuery对象
                var disX = 0;
                var disY = 0;
                var self = this;
                this.mousedown(function (e) {
                    disX = e.pageX - $(this).offset().left;
                    disY = e.pageY - $(this).offset().top;
                    $(document).mousemove(function (e) {
                        self.css('left', e.pageX - disX);
                        self.css('top', e.pageY - disY);
                    });
                    $(document).mouseup(function () {
                        $(document).off('mousemove');
                    });
                    return false;
                });
            }
        })
    })
//$("div").drag 调用

贰 、$.extend jQuery工具函数

$.extend({    
    leftTrim: function (str) {   
       return str.replace(/^\s+/g, '');    
    }
})
//$.leftTrim(str) 调用

三 、基本构造

(function($){
  $.fn.scrollUnique=function(){
    return this.each(fucntion(){
         //相关处理
      })
  }
}(jQuery)```
  写一个关于禁止外侧滚动的插件

(function ($) {
$.fn.scrollUnique = function () {
var eventType = ‘mousewheel’;
if (document.mozHidden !== undefined) {
eventType = ‘DOMMouseScroll’;
}
return this.each(function () {
$(this).on(eventType, function (event) {
var scrollTop = this.scrollTop;
var scrollHeight = this.scrollHeight;
var height = this.clientHeight;
var delta = (event.originalEvent.wheelDelta) ?
event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && scrollTop <= delta) || (delta < 0 &&
scrollHeight – height – scrollTop <= -1 * delta)) { //
IE浏览器下滚动会超越界限一向影响父级滚动,因而,临界时候手动边界滚动定位
this.scrollTop = delta > 0 ? 0 : scrollHeight; // 向上滚 || 向下滚
event.preventDefault();
}
});
});
}}(jQuery))

function wheelEvent(obj, handle)
{
this.handle = handle;
// different events between Firefox and IE
window.addEventListener ? obj.addEventListener(“DOMMouseScroll”,
this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = function (event)
{
var ev = event || window.event;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3);
// Firefox using `wheelDelta` IE using `detail`
eval (‘delta ? ‘ + parent.handle + ‘(delta) : null;’);
}

肆 、原理爬上来

找到了重要钥匙,现在就要开门了。

子成分可以滚,父成分无法滚。

笔者们得以对子成分写上鼠标滚轮事件,对吗,的老大子成分滚动到分界的时候,大家马上插一刀event.preventDefault()。干掉整个页面包车型地铁滚动,世界一下子恬静了,时间相近突然静止了相似,好像很科学的典范哦!

于是,寡人笔者屁颠屁颠搞起代码(粗糙示意):

if (direction == ‘up’ && scrollTop == 0) { event.preventDefault() }

1
2
3
if (direction == ‘up’ && scrollTop == 0) {
   event.preventDefault()
}

翻译下就是:二哥本身往上滚,当滚到头的时候,页面滚动歇菜。

Chrome一测试,喔噢,好棒,鼓掌!
美高梅开户网址 3
FireFox一测试,喔噢,好棒too,鼓掌again!
美高梅开户网址 4
IE一测试,喔噢,好…………尼玛,滚蛋了~
滚动中度直接跳过了0,直接把父元素给滚了。
美高梅开户网址 5

靠,什么鬼?不兼容,搞不定,怎么办?

③ 、鼠标滚轮事件

JS基础知识的啊,mousewheel事件:

dom.onmousewheel = function() {
    // 嘿嘿嘿
};

IE, Chrome都认识,可是FireFox浏览器,要运用DOMMouseScroll,
具体知识呢笔者事先有写过小说分析过:“JS滚轮事件(mousewheel/DOMMouseScroll)领悟”。以往回眸看这篇文章,内容和点都挺好。可是,当时恰恰在求学模块化开发,以及JavaScript语言形式,所以,提供的代码,科科,不是拿来主义的论调,所以那篇小说没有火啊~

扯远了,总而言之吧,大家对鼠标滚动这几个事件,举办event.preventDefault(),页面就好像齿轮卡壳了相同,滚不动了!

在采取的时候必要定义三个进行函数,用以依据从上述类中获取的值举办操作,并为钦赐的网页元素添加事件。比如

伍 、临界手动翻滚

正是说,大家毫不到0恐怕最大滚动中度时候,再去阻拦暗许滚动,大家要在抵达边际的前二个轮转,就起来入手,手动滚动到分界,同时event.preventDefault()阻止鼠标滚动行为。于是,IE浏览器也棒棒哒了!美高梅开户网址 6

说实话,从初始到今日,普通话啪啪啪敲了那般多,其实毛线用都尚未,从度娘或谷哥过来的同班须要的不是何等神神叨叨的废话,需求的只是上面那段能够直接拿来主义的代码,好吧,拿去啊——子元素滚完就滚完的点子源代码:

$.fn.scrollUnique = function() { return $(this).each(function() { var
eventType = ‘mousewheel’; // 火狐是DOMMouseScroll事件 if
(document.mozHidden !== undefined) { eventType = ‘DOMMouseScroll’; }
$(this).on(eventType, function(event) { // 一些数量 var scrollTop =
this.scrollTop, scrollHeight = this.scrollHeight, height =
this.clientHeight; var delta = (event.original伊芙nt.wheelDelta) ?
event.original伊芙nt.wheelDelta : -(event.original伊夫nt.detail || 0); if
((delta > 0 && scrollTop <= delta) || (delta < 0 &&
scrollHeight – height – scrollTop <= -1 * delta)) { //
IE浏览器下滚动会超越界限一向影响父级滚动,由此,临界时候手动边界滚动定位
this.scrollTop = delta > 0? 0: scrollHeight; // 向上滚 || 向下滚
event.preventDefault(); } }); }); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.fn.scrollUnique = function() {
    return $(this).each(function() {
        var eventType = ‘mousewheel’;
        // 火狐是DOMMouseScroll事件
        if (document.mozHidden !== undefined) {
            eventType = ‘DOMMouseScroll’;
        }
        $(this).on(eventType, function(event) {
            // 一些数据
            var scrollTop = this.scrollTop,
                scrollHeight = this.scrollHeight,
                height = this.clientHeight;
 
            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);        
 
            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight – height – scrollTop <= -1 * delta)) {
                // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
                this.scrollTop = delta > 0? 0: scrollHeight;
                // 向上滚 || 向下滚
                event.preventDefault();
            }        
        });
    });
};

是的,依赖jQuery的一个扩张方法,上边代码只要拷贝到你页面包车型客车JS中,然后,你愿意哪个成分滚动到底,父级不滚动,间接:

$().scrollUnique();

1
$().scrollUnique();

就足以了,然后就足以打卡下班了。

对了,有个demo,
您能够狠狠地方击那里:里头成分滚动到底外部容器不滚动demo

要是你的显示屏竖屏,只怕增长幅度1920的,会发现右边没有大滚动条,则,麻烦我们手动中度改小,拉拉窗口啊,只怕打开控制台之类的。

//zxx:
你问小编怎么样不加高页面造二个滚动条?唉,舍不得把尾部的广告刻意藏在滚动条之外~

四 、原理爬上来

找到了至关心爱抚要钥匙,以后即将开门了。

子成分能够滚,父元素不可能滚。

咱们得以对子成分写上鼠标滚轮事件,对吗,的不胜子元素滚动到分界的时候,大家当即插一刀event.preventDefault()。干掉整个页面包车型地铁轮转,世界一下子平心易气了,时间相近突然静止了相似,好像很不错的指南哦!

于是乎,寡人笔者屁颠屁颠搞起代码(粗糙示意):

if (direction == 'up' && scrollTop == 0) { 
   event.preventDefault()
}

翻译下就是:堂哥作者往上滚,当滚到头的时候,页面滚动歇菜。

Chrome一测试,喔噢,好棒,鼓掌! 美高梅开户网址 7 FireFox一测试,喔噢,好棒too,鼓掌again! 美高梅开户网址 8 IE一测试,喔噢,好…………尼玛,滚蛋了~
滚动中度直接跳过了0,直接把父成分给滚了。 美高梅开户网址 9

靠,什么鬼?不兼容,搞不定,怎么办?

复制代码 代码如下:

6、投石问路

前文也波及,页面滚动条滚动的风云源很多,不仅仅是鼠标滚动,上下键,End键,
Home键等都有滚动定位行为。因而,大家要想100%整整封闭扼杀滚动行为,仅仅上面包车型大巴鼠标滚动代码是不够的,可是,关键钥匙已经给大家了,大家能够依次,依照本人的连串要求开始展览进一步深切展开。

但是,笔者个人觉得,上边mousewheel拍卖已经足足了,什么键盘触发滚动,让他本人去游玩吧,依旧别折腾了,吃力不讨好。

哟,写完了,抬头一看,一张截图都未曾,这可那四个,八字无法断,搞一张。

美高梅开户网址 10

恩,不错,真正的科学的「截」图。

美高梅开户网址 11

 

1 赞 1 收藏
评论

美高梅开户网址 12

五 、临界手动翻滚

实属,大家不用到0恐怕最大滚动中度时候,再去阻止暗中同意滚动,我们要在到达边际的前1个轮转,就起来动手,手动滚动到分界,同时event.preventDefault()截留鼠标滚动行为。于是,IE浏览器也棒棒哒了!美高梅开户网址 13

说实话,从发轫到未来,中文啪啪啪敲了如此多,其实毛线用都不曾,从度娘或谷哥过来的同室要求的不是怎么着神神叨叨的废话,需求的只是上面那段能够一向拿来主义的代码,好呢,拿去吧——子成分滚完就滚完的法门源代码:

$.fn.scrollUnique = function() {
    return $(this).each(function() {
        var eventType = 'mousewheel';
        // 火狐是DOMMouseScroll事件
        if (document.mozHidden !== undefined) {
            eventType = 'DOMMouseScroll';
        }
        $(this).on(eventType, function(event) {
            // 一些数据
            var scrollTop = this.scrollTop,
                scrollHeight = this.scrollHeight,
                height = this.clientHeight;

            var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);        

            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
                this.scrollTop = delta > 0? 0: scrollHeight;
                // 向上滚 || 向下滚
                event.preventDefault();
            }        
        });
    }); 
};

正确,依赖jQuery的二个扩张方法,上面代码只要拷贝到你页面包车型客车JS中,然后,你希望哪个成分滚动到底,父级不滚动,直接:

$().scrollUnique();

就能够了,然后就能够打卡下班了。

对了,有个demo,
您能够狠狠地点击这里:里面元素滚动到底外部容器不滚动demo

借使您的荧屏竖屏,恐怕增长幅度一九一七的,会发现左边没有大滚动条,则,麻烦我们手动中度改小,拉拉窗口啊,或许打开控制台之类的。

//zxx:
你问笔者怎么着不加高页面造2个滚动条?唉,舍不得把底部的广告刻意藏在滚动条之外~

function handle(delta)
{
document.getElementById(‘text’).scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById(‘text’), ‘handle’);

六 、投砾引珠

前文也涉及,页面滚动条滚动的事件源很多,不仅仅是鼠标滚动,上下键,End键,
Home键等都有滚动定位行为。因而,大家要想百分百整个封闭扼杀滚动行为,仅仅上边包车型地铁鼠标滚动代码是不够的,不过,关键钥匙已经给大家了,大家可以依次,遵照自个儿的品种必要实行更进一步长远展开。

但是,笔者个人认为,上边mousewheel拍卖已经够用了,什么键盘触发滚动,让她协调去游玩吧,依然别折腾了,吃力不讨好。

哟,写完了,抬头一看,一张截图都尚未,那可不行,八字不能够断,搞一张。

 

恩,不错,真正的科学的「截」图。

 

在上例中率先个参数是加上滚轮事件的网页成分, id 为 text 的
div;第一个参数是执行函数的名字 handle。
里面 handle 函数必须有且只有1个参数delta,滚轮往上滚时 delta 大于
0,往下则小于 0。上例 handle 函数的效果是用滚轮对 div 达成滚动条的效能

你只怕感兴趣的篇章:

  • js中鼠标滚轮事件详解(firefox多浏览器)
  • JS滚轮事件onmousewheel使用介绍
  • javascript监听鼠标滚轮事件浅析
  • js捕获鼠标滚轮事件代码
  • javascript
    包容鼠标滚轮事件
  • javascript完成禁绝鼠标滚轮事件
  • JavaScript
    滚轮事件接纳验证
  • JavaScript主旨事件、鼠标事件和滚轮事件采纳详解
  • 二种js监听滚轮事件的落到实处格局
  • javascript滚轮事件基础实例讲解(37)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图