自定义滚动条实现¶

统计信息：字数 5855 阅读12分钟

上下滚动条和左右滚动条不在一个DIV内部，所以某些情况下，右侧滚动条不可见

一个解决思路是：自定义滚动条，隐藏原始滚动条，基本代码如下

scrollbar.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import '../css/scrollbar.css';

const propTypes = {
  eventBus: PropTypes.object.isRequired,
};

class ScrollBar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isDraging: false,
      // X: bottom scrollbar offset left, range [0, innerWidth - 100]. When dragging, x is changing
      x: null,
      // clickX 表示拖动滚动条时，鼠标点击的位置距离滚动条左侧的距离, range [0, 100], When dragging, clickX isn't changing
      clickX: 0,
    };
  }

  componentDidMount() {
    this.unsubscribeScrollToColumn = this.props.eventBus.subscribe('set-scrollbar-left', this.setScrollBarLeft);
    document.addEventListener('mouseup', this.onMouseUp);
  }

  componentWillUnmount() {
    this.unsubscribeScrollToColumn();
    document.removeEventListener('mouseup', this.onMouseUp);
  }

  /**
   * 这个函数处理联动（界面滚动时，触发滚动条滚动）这里的100是滚动条的宽度
   */
  setScrollBarLeft = (leftRatio) => {
    // when bottom scrollbar is dragging, can't set scrollBa left
    if (this.state.isDraging) return;
    this.setState({
      x: (window.innerWidth - 100) * leftRatio,
    });
  }

  /**
   * 当鼠标按下，开始拖动，设置当前的位置为初始拖动的位置
   */
  handleMouseDown = (e) => {
    // console.log(this.state.x, e.clientX, e.nativeEvent.offsetX);
    this.setState({
      isDraging: true,
      clickX: e.nativeEvent.offsetX,
    });
    // 获取当时 Grid 整理的距离
    // 因为这个值可能变化，所以每次滚动时需要获取这个值
    this.gridWidth = window.grid.viewport.viewport.clientWidth - window.innerWidth;
    // console.log(this.gridWidth);
  }

  /**
   * 当鼠标抬起时，停止拖拽，设置当前的点击位置是0（这个有没有必要设置）
   */
  onMouseUp = () => {
    if (this.state.isDraging) {
      setTimeout(() => {
        this.setState({ isDraging: false, clickX: 0 });
      }, 100);
    }
  }

  /**
   * 当拖拽进行时（鼠标按下并开始移动），获取当前的位移，计算新的偏移量
   * 注意：可以向右滚动，可以向左滚动
   * 当拖拽进行时，应该计算出当前的比例，然后Grid水平滚动
   * 现在的问题，如果鼠标拖动时移动到滚动条外部，那么无法触发拖动
   * */ 
  onMouseMove = (e) => {
    e.persist();
    if (this.state.isDraging) {
      // 新距离 = 原始距离 + （当前滚动的距离 - 初始滚动的距离）
      let newX = this.state.x + e.nativeEvent.offsetX - this.state.clickX;
      newX = Math.min(newX, window.innerWidth - 100); // 最大的拖动不能超过右侧边界
      this.setState({ x: newX });
      // 计算当前比例
      const leftRatio = newX / (window.innerWidth - 100);
      // 设置Grid滚动
      // console.log(leftRatio, leftRatio * this.gridWidth);
      window.grid.setScrollLeft(leftRatio * this.gridWidth);
      // 这里写的封装性不好，不利于其他组件使用，应当传一个回调函数
    }
  }

  renderBottomToolbar = () => {
    return (
      <div
        className="antiscroll-scrollbar antiscroll-scrollbar-horizontal antiscroll-scrollbar-shown"
        style={{transform: `translateX(${this.state.x}px)`}}
        draggable="true"
        onMouseDown={this.handleMouseDown}
        onMouseMove={this.onMouseMove}
        onMouseUp={this.onMouseUp}
      ></div>
    );
  }

  // todo: rightToolbar event handle
  renderRightToolbar = () => {
    return (
      <div
        className="antiscroll-scrollbar antiscroll-scrollbar-vertical antiscroll-scrollbar-shown"
      ></div>
    );
  }

  render() {
    return (
      <div id="scrollOverlay" className="antiscroll-wrap">
        {this.renderBottomToolbar()}
        {this.renderRightToolbar()}
      </div>
    );
  }
}

ScrollBar.propTypes = propTypes;

export default ScrollBar;

对应的 scrollbar.css

#scrollOverlay {
  display: inline-block;
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 156px;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .7;
}

#scrollOverlay .antiscroll-scrollbar {
  pointer-events: auto;
  z-index: 2;
  background-color: hsla(0,0%,0%,0.28);
  box-shadow: inset 0 0 0 1px hsl(0,0%,100%);
  border-radius: 5px;
}

#scrollOverlay .antiscroll-scrollbar-horizontal {
  height: 12px;
  width: 100px;
  position: absolute;
  bottom: 32px;
}

#scrollOverlay .antiscroll-scrollbar-vertical {
  width: 12px;
  height: 100px;
  position: absolute;
  right: 0;
}

/* 隐藏原始滚动对象的滚动条 */
.react-grid-Grid::-webkit-scrollbar {
  width: 0;
}

具体使用，我们在 Grid 中加入这个滚动条

import ScrollBar from '../components/scrollbar';

// Grid 原生滚动，触发回调函数
onScroll = () => {
  // todo: when clientWidth is smaller than innerWidth, don't show bottom scrollBar
  let scrollLeftRatio = this._scrollLeft / (this.viewport.viewport.clientWidth - window.innerWidth);
  // 当原生DOM左右滚定时，获取当前滚动的比例（偏移量/全部宽度），并设置滚动条进行滚动
  this.setScrollLeftRatio(scrollLeftRatio);
}

setScrollLeftRatio = (scrollLeftRatio) => {
  this.props.eventBus.dispatch('set-scrollbar-left', scrollLeftRatio);
}

// 在原始滚动元素中，传入eventBus，便于事件传值处理
// <ScrollBar eventBus={this.props.eventBus}/>

最后这个代码暂时不用，优先使用第三方库实现（处理滚动条计算考虑情况较多）

Last update: November 9, 2024