前端队长の技术博客

  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/

(完)