滚动条自定义

首先记录几个资料的url

知乎的消息 Dropdown 是如何做到当消息滚动到头的时候阻止页面滚动的？

How to prevent page scrolling when scrolling a DIV element?
[代码]

JS滚轮事件(mousewheel/DOMMouseScroll)了解

先附上几段代码吧

目录

1. 事件监听绑定与解绑
2. 事件监听
3. 数据对象
4. 初始化数据
5. 事件回调方法
6. 各种计算属性
7. Bar.vue
8. 样式postcss

事件监听绑定与解绑

const on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
})();


const off = (function() {
    if (document.removeEventListener) {
        return function(element, event, handler) {
            if (element && event) {
                element.removeEventListener(event, handler, false);
            }
        };
    } else {
        return function(element, event, handler) {
            if (element && event) {
                element.detachEvent('on' + event, handler);
            }
        };
    }
})();

事件监听

// 监听滚动事件
/**
 * 监听滚动中 -- 元素滚动时执行，
 * js改变滚动位置会触发
 * 每次滚动会事中触发多次
 * 不能滚动时不会触发
 */
on(wrap, 'scroll', handleScroll);
/**
 * 监听滚动前 -- 滚动鼠标滚轮时执行
 * js改变滚动位置不会触发
 * 每次滚动在事前触发一次
 * 不能滚动时也会触发
 */
.on(wrap, 'wheel', handleWheel);

数据对象

{
    wrapOwn: {
        scrollTop: 0,
        scrollLeft: 0,
        scrollHeight: 1,
        scrollWidth: 1,
        clientHeight: 1,
        clientWidth:1
    },
    wrap: wrap, // 滚动监听对象
}

初始化数据

wrapOwn.clientHeight = wrap.clientHeight;
wrapOwn.clientWidth = wrap.clientWidth;
wrapOwn.scrollHeight = wrap.scrollHeight;
wrapOwn.scrollWidth = wrap.scrollWidth;

事件回调方法

handleScroll(e){
    wrapOwn.scrollTop = wrap.scrollTop;
    wrapOwn.scrollLeft = wrap.scrollLeft;
}

// 滚动鼠标滚轮时回调，确定是否达到极限然后阻止滚动
handleWheel(e) {
    // console.log('scrollTop=',wrapOwn.scrollTop, 'deltaY=', e.deltaY, 'scrollHeight=',wrapOwn.scrollHeight, 'clientHeight=', wrapOwn.clientHeight);
    // console.log('scrollLeft=',wrapOwn.scrollLeft, 'deltaX=', e.deltaX, 'scrollWidth=',wrapOwn.scrollWidth, 'clientHeight=', wrapOwn.clientWidth);

    // e.deltaY e.deltaX === 0 , 表示在当前方向上没有位移
    // 垂直滚动到顶部
    if(wrapOwn.scrollTop===0 && e.deltaY < 0){
        // console.log('垂直滚动到顶部');
        e.preventDefault();
        return;
    }
    // 垂直滚动到底部
    if(wrapOwn.clientHeight + wrapOwn.scrollTop === wrapOwn.scrollHeight && e.deltaY > 0){
        // console.log('垂直滚动到底部');
        e.preventDefault();
        return;
    }

    // 水平滚动到左侧
    if(wrapOwn.scrollLeft===0 && e.deltaX < 0){
        // console.log('水平滚动到左侧');
        e.preventDefault();
        return;
    }
    // 水平滚动到右侧
    if(wrapOwn.clientWidth + wrapOwn.scrollLeft === wrapOwn.scrollWidth && e.deltaX > 0){
        // console.log('水平滚动到右侧');
        e.preventDefault();
        return;
    }
}

各种计算属性

// 因为使用的是百分比，所以都要乘以100

moveY(){
    return ((wrapOwn.scrollTop * 100) / wrapOwn.clientHeight) || 0;
},
moveX(){
    return ((wrapOwn.scrollLeft * 100) / wrapOwn.clientWidth) || 0;
},


heightPercentage(){
    return (wrapOwn.clientHeight * 100 / wrapOwn.scrollHeight);
},
// 垂直滚动条的高度百分比，只有小于100才显示
sizeHeight(){
    return (heightPercentage < 100) ? (heightPercentage + '%') : undefined;
},


widthPercentage(){
    return (wrapOwn.clientWidth * 100 / wrapOwn.scrollWidth);
},
// 水平滚动条的宽度百分比，只有小于100才显示
sizeWidth(){
    return (widthPercentage < 100) ? (widthPercentage + '%') : undefined;
}

设置滚动条

Bar.vue

样式postcss