前端队长の技术博客

1. 问题描述
2. 代码实现
3. 参考链接

问题描述

很多时候父元素和子元素都有滚动条的时候，子元素在滚动到顶部或底部的时候，父元素就会开始滚动，但是很多时候我们只是滚动过快而已，如果父元素滚动了，就会影响子元素的查看，那么如何在子元素滚动到顶部或者底部的时候，父元素也不能滚动呢？

代码实现

新建一个js模块：

function scrollUnique(dom) {
    return $(dom).each(function() {
        let eventType = 'mousewheel';
        // 火狐是DOMMouseScroll事件
        if (window.navigator.userAgent.includes('Firefox')) {
            eventType = 'DOMMouseScroll';
        }

        $(dom).on(eventType, function(event) {
            // 一些数据
            let scrollTop = this.scrollTop;
            let scrollHeight = this.scrollHeight;
            let height = this.clientHeight;

            let delta = event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);  // 滚轮滚动一格的像素值，向上滚动为正值。

            // console.log('scrollTop', this.scrollTop);
            // console.log('scrollHeight', this.scrollHeight);
            // console.log('clientHeight', this.clientHeight);
            // console.log('delta', delta);

            if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
                $(dom).scrollTop = delta > 0 ? 0 : scrollHeight;
                // 阻止浏览器默认滚动事件（父元素的滚动）
                event.preventDefault();
            }
        });
    });
}

export {scrollUnique}

使用的时候，引入这个js模块，然后参数dom选择子元素的class或者id即可。

import { scrollUnique } from "@commons/utils.js";

// 展开可显示字段列表
showField() {
    this.showFieldsFlag = true;

    this.$nextTick(()=>{
        scrollUnique('.multiple-choice');
    });
},

参考链接

https://www.zhangxinxu.com/wordpress/2015/12/element-scroll-prevent-parent-element-scroll-js/

（完）

This site is open source. Improve this page.