javascript實現(xiàn)自定義滾動條效果

更新時間：2021年08月19日 10:51:16 作者：Michael18811380328

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)自定義滾動條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在實際項目中，遇到上下滾動條和左右滾動條不在一個DIV內(nèi)部，所以某些情況下，右側(cè)滾動條不可見。但是需要咋同一個視口內(nèi)顯示兩個滾動條。

一個解決思路是：自定義滾動條，隱藏原始滾動條。

自定義滾動條

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 表示拖動滾動條時，鼠標(biāo)點擊的位置距離滾動條左側(cè)的距離, 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);
  }

  /**
   * 這個函數(shù)處理聯(lián)動（界面滾動時，觸發(fā)滾動條滾動）這里的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,
    });
  }

  /**
   * 當(dāng)鼠標(biāo)按下，開始拖動，設(shè)置當(dāng)前的位置為初始拖動的位置
   */
  handleMouseDown = (e) => {
    this.setState({
      isDraging: true,
      clickX: e.nativeEvent.offsetX,
    });
  }

  /**
   * 當(dāng)鼠標(biāo)抬起時，停止拖拽，設(shè)置當(dāng)前的點擊位置是0（這個有沒有必要設(shè)置）
   */
  onMouseUp = () => {
    if (this.state.isDraging) {
      setTimeout(() => {
        this.setState({ isDraging: false, clickX: 0 });
      }, 100);
    }
  }

  /**
   * 當(dāng)拖拽進(jìn)行時（鼠標(biāo)按下并開始移動），獲取當(dāng)前的位移，計算新的偏移量
   * 注意：可以向右滾動，可以向左滾動
   * 當(dāng)拖拽進(jìn)行時，應(yīng)該計算出當(dāng)前的比例，然后Grid水平滾動
   * 現(xiàn)在的問題，如果鼠標(biāo)拖動時移動到滾動條外部，那么無法觸發(fā)拖動
   * */ 
  onMouseMove = (e) => {
    e.persist();
    if (this.state.isDraging) {
      // 新距離 = 原始距離 + （當(dāng)前滾動的距離 - 初始滾動的距離）
      let newX = this.state.x + e.nativeEvent.offsetX - this.state.clickX;
      newX = Math.min(newX, window.innerWidth - 100); // 最大的拖動不能超過右側(cè)邊界
      this.setState({ x: newX });
      const leftRatio = newX / (window.innerWidth - 100);
    }
  }

  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;

滾動條樣式

對應(yīng)的 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-demo::-webkit-scrollbar {
  width: 0;
}

滾動條具體使用

具體使用，我們在 Grid 中加入這個滾動條

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

// Grid 原生滾動，觸發(fā)回調(diào)函數(shù)
onScroll = () => {
  // todo: when clientWidth is smaller than innerWidth, don't show bottom scrollBar
  let scrollLeftRatio = this._scrollLeft / (clientWidth - window.innerWidth);
  // 當(dāng)原生DOM左右滾定時，獲取當(dāng)前滾動的比例（偏移量/全部寬度），并設(shè)置滾動條進(jìn)行滾動
  this.setScrollLeftRatio(scrollLeftRatio);
}

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

// 在原始滾動元素中，傳入eventBus，便于事件傳值處理
// <ScrollBar eventBus={this.props.eventBus}/>

自定義滾動條也有很多開源第三方組件，我們優(yōu)先使用第三方庫實現(xiàn)（處理滾動條計算考慮情況較多）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: