并为指定的网页元素添加事件,首先来学习两个

作者: 前端  发布:2019-11-21

子元素scroll父元素容器不跟随滚动JS实现

2015/12/18 · JavaScript · 滚动

原文出处: 张鑫旭   

一、开场暖身

网上常见蹲来蹲去的小段子,比方说:“李代沫蹲,李代沫蹲,李代沫蹲完黄海波蹲;黄海波蹲,黄海波蹲,黄海波蹲完宁财神蹲;宁财神蹲,宁财神蹲,宁财神蹲完张耀扬蹲;张耀扬蹲,张耀扬蹲,张耀扬蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完……”。应该源自“萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲……”。

在网页中,滚动条的滚动行为也是类似的调调,如果页面出现多个内嵌滚动条,则行为表现是:子元素滚,子元素滚,子元素滚完父元素滚;父元素滚,父元素滚,父元素滚完容器滚……

比方说下面:

图片 1

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

//zxx: 别问为什么不使用张含韵,因为张妹子照片是横的,滚动空间小,晓得伐~

这是浏览器的默认行为,如果我们遇到了一个需求:子元素滚,子元素滚完,就完了,父元素不需要滚了。那该如何实现呢?

在PC端,OK,本文介绍的方法,值适用于PC端,移动端,咳咳,我15年就没做过移动端项目,不好意思,手生,我也没去研究。

首先来学习两个函数

今天在网上找来了响应滚轮的函数并改写成下面的类

二、阻止浏览器默认行为的特定套路

哈,本文标题有些拗口,实际上用一句话概括就是:如何阻止浏览器的默认滚动行为。

基本上,好像印象中就没有例外的,阻止浏览器的默认行为,就一条(假设事件对象参数是event):event.preventDefault().

这是标准规范使用方法。但是,对于老IE浏览器,event.returnValue = false. 如果你使用jQuery等框架,直接上面的event.preventDefault()就可以,库已经帮你搞定了兼容细节处理。

OK,回到本文。阻止默认滚动,也是类似,关键是找到准确的事件。

第一反应是scroll事件,不知道是不是我测试的方法不对,结果没鸟用;其实想想也可以理解,scroll事件要触发,尼玛必须已经滚动了哈~

后来,发现要从滚动事件的源头处理起来。在PC端,绝大多数滚动都是鼠标滚动触发的(上下快捷键也可以滚动页面,但一般人不知道),因此,我们可以从鼠标滚轮事件入手。

  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(),页面就像齿轮卡壳了一样,滚不动了!

正式开始

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 调用

2、$.extend jQuery工具函数

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

3、基本结构

(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一测试,喔噢,好棒,鼓掌! 图片 2 FireFox一测试,喔噢,好棒too,鼓掌again! 图片 3 IE一测试,喔噢,好…………尼玛,滚蛋了~ 滚动高度直接跳过了0,直接把父元素给滚了。 图片 4

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

在使用的时候需要定义一个执行函数,用以根据从上述类中获得的值进行操作,并为指定的网页元素添加事件。比如

五、临界手动翻滚

就是说,我们不要到0或者最大滚动高度时候,再去阻止默认滚动,我们要在到达边界的前一个滚动,就开始下手,手动滚动到边界,同时event.preventDefault()阻止鼠标滚动行为。于是,IE浏览器也棒棒哒了!图片 5

说实话,从开头到现在,中文啪啪啪敲了这么多,其实毛线用都没有,从度娘或谷哥过来的同学需要的不是什么神神叨叨的废话,需要的只是下面这段可以直接拿来主义的代码,好吧,拿去吧——子元素滚完就滚完的方法源代码:

$.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(); } }); }); };

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: 你问我什么不加高页面造一个滚动条?唉,舍不得把底部的广告刻意藏在滚动条之外~

复制代码 代码如下:

六、抛砖引玉

前文也提到,页面滚动条滚动的事件源很多,不仅仅是鼠标滚动,上下键,End键, Home键等都有滚动定位行为。因此,大家要想100%全方位封杀滚动行为,仅仅上面的鼠标滚动代码是不够的,但是,关键钥匙已经给大家了,大家可以依次,按照自己的项目需求进行进一步深入拓展。

不过,我个人觉得,上面mousewheel处理已经足够了,什么键盘触发滚动,让他自己去玩耍吧,还是别折腾了,吃力不讨好。

哟,写完了,抬头一看,一张截图都没有,这可不行,风水不能断,搞一张。

图片 6

恩,不错,真正的无可挑剔的「截」图。

图片 7

 

1 赞 1 收藏 评论

图片 8

function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
并为指定的网页元素添加事件,首先来学习两个函数。new wheelEvent(document.getElementById('text'), 'handle');

在上例中第一个参数是添加滚轮事件的网页元素, id 为 text 的 div;第二个参数是执行函数的名字 handle。
其中 handle 函数必须有且只有一个参数delta,滚轮往上滚时 delta 大于 0,往下则小于 0。上例 handle 函数的作用是用滚轮对 div 实现滚动条的功能

您可能感兴趣的文章:

  • js中鼠标滚轮事件详解(firefox多浏览器)
  • JS滚轮事件onmousewheel使用介绍
  • javascript监听鼠标滚轮事件浅析
  • js捕获鼠标滚轮事件代码
  • javascript 兼容鼠标滚轮事件
  • javascript实现禁止鼠标滚轮事件
  • JavaScript 滚轮事件使用说明
  • JavaScript焦点事件、鼠标事件和滚轮事件使用详解
  • 两种js监听滚轮事件的实现方法
  • javascript滚轮事件基础实例讲解(37)

本文由9159.com发布于前端,转载请注明出处:并为指定的网页元素添加事件,首先来学习两个

关键词:

上一篇:没有了
下一篇:没有了