前幾天有給大家分享一個(gè)Vue自定義滾動(dòng)條組件VScroll。今天再分享一個(gè)最新開(kāi)發(fā)的React PC端模擬滾動(dòng)條組件RScroll。

vue+pc桌面端模擬滾動(dòng)條組件VScroll

rscroll 一款基于react.js構(gòu)建的超小巧自定義桌面端美化滾動(dòng)條。支持原生滾動(dòng)條、自動(dòng)隱藏、滾動(dòng)條尺寸/層級(jí)/顏色等功能。

如上圖：支持垂直/水平滾動(dòng)條。

功能及效果和之前VScroll保持一致。在開(kāi)發(fā)支持參考借鑒了el-scrollbar等組件設(shè)計(jì)思想。

調(diào)用非常簡(jiǎn)單，只需包裹住內(nèi)容即可快速生成一個(gè)漂亮的滾動(dòng)條。

引入組件

// 引入滾動(dòng)條組件RScrollimport RScroll from './components/rscroll'

快速使用

這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！

這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！

這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！

這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！

編碼實(shí)現(xiàn)

在components目錄下新建rscroll目錄，并創(chuàng)建index.js頁(yè)面。

rscroll滾動(dòng)條模板

render() { return ( this.$ref__box = el} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> this.$ref__wrap = el} onScroll={this.handleScroll}> {prop.children} {/* 滾動(dòng)條 */} this.$ref__barY = el} onMouseDown={this.handleDragThumb.bind(this, 0)} style={{background: prop.color, height: opt.barHeight+'px'}}> this.$ref__barX = el} onMouseDown={this.handleDragThumb.bind(this, 1)} style={{background: prop.color, width: opt.barWidth+'px'}}> )}

react監(jiān)聽(tīng)元素/DOM尺寸變化。由于react不像vue可以自定義指令directives，只能使用componentDidUpdate來(lái)監(jiān)聽(tīng)。

componentDidUpdate(preProps, preState) { // 監(jiān)聽(tīng)內(nèi)層view DOM尺寸變化 let $view = this.$ref__wrap.querySelector('.vscroll__view') const viewStyle = $view.currentStyle ? $view.currentStyle : document.defaultView.getComputedStyle($view, null); if(preState.$viewWidth !== viewStyle.width || preState.$viewHeight !== viewStyle.height) { this.setState({ $viewWidth: viewStyle.width, $viewHeight: viewStyle.height }) this.updated() }}/** * ReactJs|Next.js自定義滾動(dòng)條組件RScroll */import React from 'react'class RScroll extends React.Component { /** * 默認(rèn)配置 */ static defaultProps = { // 是否顯示原生滾動(dòng)條 native: false, // 鼠標(biāo)滑出是否自動(dòng)隱藏滾動(dòng)條 autohide: false, // 自定義滾動(dòng)條大小 size: '', // 自定義滾動(dòng)條顏色 color: '', // 滾動(dòng)條層級(jí) zIndex: null } constructor(props) { super(props) this.state = { barWidth: 0, // 滾動(dòng)條寬度 barHeight: 0, // 滾動(dòng)條高度 ratioX: 1, // 滾動(dòng)條水平偏移率 ratioY: 1, // 滾動(dòng)條垂直偏移率 isTaped: false, // 鼠標(biāo)光標(biāo)是否按住滾動(dòng)條 isHover: false, // 鼠標(biāo)光標(biāo)是否懸停在滾動(dòng)區(qū) isShow: !this.props.autohide, // 是否顯示滾動(dòng)條 $viewWidth: null, $viewHeight: null, } } // 鼠標(biāo)滑入 handleMouseEnter = () => { this.setState({ isHover: true, isShow: true }) this.updated() } // 鼠標(biāo)滑出 handleMouseLeave = () => { const { isTaped } = this.state this.setState({ isHover: false }) this.setState({ isShow: false }) } // 拖動(dòng)滾動(dòng)條 handleDragThumb = (index, e) => { let _this = this this.setState({ isTaped: true }) const { ratioX, ratioY } = this.state let c = {} // 阻止默認(rèn)事件 domUtils.isIE() ? (e.returnValue = false, e.cancelBubble = true) : (e.stopPropagation(), e.preventDefault()) document.onselectstart = () => false if(index == 0) { c.dragY = true c.clientY = e.clientY }else { c.dragX = true c.clientX = e.clientX } domUtils.on(document, 'mousemove', function(evt) { if(_this.state.isTaped) { if(c.dragY) { _this.$ref__wrap.scrollTop += (evt.clientY - c.clientY) * ratioY _this.$ref__barY.style.transform = `translateY(${_this.$ref__wrap.scrollTop / ratioY}px)` } if(c.dragX) { _this.$ref__wrap.scrollLeft += (evt.clientX - c.clientX) * ratioX _this.$ref__barX.style.transform = `translateX(${_this.$ref__wrap.scrollLeft / ratioX})` } } }) domUtils.on(document, 'mouseup', function() { _this.setState({ isTaped: false }) document.onmouseup = null document.onselectstart = null if(!_this.state.isHover && _this.props.autohide) { _this.setState({ isShow: false }) } }) } // 點(diǎn)擊滾動(dòng)槽 handleClickTrack = (index, e) => { // ... } // 更新滾動(dòng)區(qū) updated = () => { if(this.props.native) return let c = {} let barSize = domUtils.getScrollBarSize() // 垂直滾動(dòng)條 if(this.$ref__wrap.scrollHeight > this.$ref__wrap.offsetHeight) { c.barHeight = this.$ref__box.offsetHeight **2 / this.$ref__wrap.scrollHeight c.ratioY = (this.$ref__wrap.scrollHeight - this.$ref__box.offsetHeight) / (this.$ref__box.offsetHeight - c.barHeight) this.$ref__barY.style.transform = `translateY(${this.$ref__wrap.scrollTop / c.ratioY}px)` // 隱藏系統(tǒng)滾動(dòng)條 if(barSize) { this.$ref__wrap.style.marginRight = -barSize + 'px' } }else { c.barHeight = 0 this.$ref__barY.style.transform = '' this.$ref__wrap.style.marginRight = '' } // 水平滾動(dòng)條 ... } // 鼠標(biāo)滾動(dòng) handleScroll = (e) => { const { onScroll } = this.props typeof onScroll === 'function' && onScroll.call(this, e) this.updated() } render() { return ( // ... ) }}export default RScroll

這里是內(nèi)容信息！這里是內(nèi)容信息！這里是內(nèi)容信息！

// 監(jiān)聽(tīng)滾動(dòng)事件handleScroll = (e) => { let _scrollTop = e.target.scrollTop let _scrollStatus // 判斷滾動(dòng)狀態(tài) if(e.target.scrollTop == 0) { _scrollStatus = '滾到至頂部' } else if(e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) { _scrollStatus = '滾動(dòng)至底部' }else { _scrollStatus = '正滾動(dòng)中..' } this.setState({ scrollTop: _scrollTop, scrollStatus: _scrollStatus })}

好了，以上就是基于react.js開(kāi)發(fā)自定義美化滾動(dòng)條組件。希望大家能喜歡~~

總結(jié)

以上是生活随笔為你收集整理的vue 滚动条_轻量级 React.js 虚拟美化滚动条组件RScroll的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。