javascript實(shí)現(xiàn)自定義滾動(dòng)條效果
在實(shí)際項(xiàng)目中,遇到上下滾動(dòng)條和左右滾動(dòng)條不在一個(gè)DIV內(nèi)部,所以某些情況下,右側(cè)滾動(dòng)條不可見。但是需要咋同一個(gè)視口內(nèi)顯示兩個(gè)滾動(dòng)條。
一個(gè)解決思路是:自定義滾動(dòng)條,隱藏原始滾動(dòng)條。
自定義滾動(dòng)條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 表示拖動(dòng)滾動(dòng)條時(shí),鼠標(biāo)點(diǎn)擊的位置距離滾動(dòng)條左側(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); } /** * 這個(gè)函數(shù)處理聯(lián)動(dòng)(界面滾動(dòng)時(shí),觸發(fā)滾動(dòng)條滾動(dòng))這里的100是滾動(dòng)條的寬度 */ 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)按下,開始拖動(dòng),設(shè)置當(dāng)前的位置為初始拖動(dòng)的位置 */ handleMouseDown = (e) => { this.setState({ isDraging: true, clickX: e.nativeEvent.offsetX, }); } /** * 當(dāng)鼠標(biāo)抬起時(shí),停止拖拽,設(shè)置當(dāng)前的點(diǎn)擊位置是0(這個(gè)有沒有必要設(shè)置) */ onMouseUp = () => { if (this.state.isDraging) { setTimeout(() => {this.setState({ isDraging: false, clickX: 0 }); }, 100); } } /** * 當(dāng)拖拽進(jìn)行時(shí)(鼠標(biāo)按下并開始移動(dòng)),獲取當(dāng)前的位移,計(jì)算新的偏移量 * 注意:可以向右滾動(dòng),可以向左滾動(dòng) * 當(dāng)拖拽進(jìn)行時(shí),應(yīng)該計(jì)算出當(dāng)前的比例,然后Grid水平滾動(dòng) * 現(xiàn)在的問題,如果鼠標(biāo)拖動(dòng)時(shí)移動(dòng)到滾動(dòng)條外部,那么無(wú)法觸發(fā)拖動(dòng) * */ onMouseMove = (e) => { e.persist(); if (this.state.isDraging) { // 新距離 = 原始距離 + (當(dāng)前滾動(dòng)的距離 - 初始滾動(dòng)的距離) let newX = this.state.x + e.nativeEvent.offsetX - this.state.clickX; newX = Math.min(newX, window.innerWidth - 100); // 最大的拖動(dòng)不能超過右側(cè)邊界 this.setState({ x: newX }); const leftRatio = newX / (window.innerWidth - 100); } } renderBottomToolbar = () => { return ( <divclassName='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 ( <divclassName='antiscroll-scrollbar antiscroll-scrollbar-vertical antiscroll-scrollbar-shown' ></div> ); } render() { return ( <div className='antiscroll-wrap'>{this.renderBottomToolbar()}{this.renderRightToolbar()} </div> ); }}ScrollBar.propTypes = propTypes;export default ScrollBar;滾動(dòng)條樣式
對(duì)應(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;}/* 隱藏原始滾動(dòng)對(duì)象的滾動(dòng)條 */.react-demo::-webkit-scrollbar { width: 0;}滾動(dòng)條具體使用
具體使用,我們?cè)?Grid 中加入這個(gè)滾動(dòng)條
import ScrollBar from ’../components/scrollbar’;// Grid 原生滾動(dòng),觸發(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左右滾定時(shí),獲取當(dāng)前滾動(dòng)的比例(偏移量/全部寬度),并設(shè)置滾動(dòng)條進(jìn)行滾動(dòng) this.setScrollLeftRatio(scrollLeftRatio);}setScrollLeftRatio = (scrollLeftRatio) => { this.props.eventBus.dispatch(’set-scrollbar-left’, scrollLeftRatio);}// 在原始滾動(dòng)元素中,傳入eventBus,便于事件傳值處理// <ScrollBar eventBus={this.props.eventBus}/>
自定義滾動(dòng)條也有很多開源第三方組件,我們優(yōu)先使用第三方庫(kù)實(shí)現(xiàn)(處理滾動(dòng)條計(jì)算考慮情況較多)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. vue跳轉(zhuǎn)頁(yè)面常用的幾種方法匯總2. XML入門的常見問題(三)3. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)4. 不要在HTML中濫用div5. Vue中原生template標(biāo)簽失效如何解決6. XML 非法字符(轉(zhuǎn)義字符)7. 父div高度不能自適應(yīng)子div高度的解決方案8. ASP動(dòng)態(tài)include文件9. Jquery使用原生AJAX方法請(qǐng)求數(shù)據(jù)10. el-input無(wú)法輸入的問題和表單驗(yàn)證失敗問題解決
