前幾天有給大家分享一個Vue自定義滾動條組件VScroll。今天再分享一個最新開發的React PC端模擬滾動條組件RScroll。

vue+pc桌面端模擬滾動條組件VScroll

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

如上圖：支持垂直/水平滾動條。

功能及效果和之前VScroll保持一致。在開發支持參考借鑒了el-scrollbar等組件設計思想。

調用非常簡單，只需包裹住內容即可快速生成一個漂亮的滾動條。

引入組件

// 引入滾動條組件RScrollimport RScroll from './components/rscroll'

快速使用

這里是內容信息！這里是內容信息！這里是內容信息！

這里是內容信息！這里是內容信息！這里是內容信息！

這里是內容信息！這里是內容信息！這里是內容信息！

這里是內容信息！這里是內容信息！這里是內容信息！

編碼實現

在components目錄下新建rscroll目錄，并創建index.js頁面。

rscroll滾動條模板

render() { return ( this.$ref__box = el} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> this.$ref__wrap = el} onScroll={this.handleScroll}> {prop.children} {/* 滾動條 */} 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監聽元素/DOM尺寸變化。由于react不像vue可以自定義指令directives，只能使用componentDidUpdate來監聽。

componentDidUpdate(preProps, preState) { // 監聽內層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自定義滾動條組件RScroll */import React from 'react'class RScroll extends React.Component { /** * 默認配置 */ static defaultProps = { // 是否顯示原生滾動條 native: false, // 鼠標滑出是否自動隱藏滾動條 autohide: false, // 自定義滾動條大小 size: '', // 自定義滾動條顏色 color: '', // 滾動條層級 zIndex: null } constructor(props) { super(props) this.state = { barWidth: 0, // 滾動條寬度 barHeight: 0, // 滾動條高度 ratioX: 1, // 滾動條水平偏移率 ratioY: 1, // 滾動條垂直偏移率 isTaped: false, // 鼠標光標是否按住滾動條 isHover: false, // 鼠標光標是否懸停在滾動區 isShow: !this.props.autohide, // 是否顯示滾動條 $viewWidth: null, $viewHeight: null, } } // 鼠標滑入 handleMouseEnter = () => { this.setState({ isHover: true, isShow: true }) this.updated() } // 鼠標滑出 handleMouseLeave = () => { const { isTaped } = this.state this.setState({ isHover: false }) this.setState({ isShow: false }) } // 拖動滾動條 handleDragThumb = (index, e) => { let _this = this this.setState({ isTaped: true }) const { ratioX, ratioY } = this.state let c = {} // 阻止默認事件 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 }) } }) } // 點擊滾動槽 handleClickTrack = (index, e) => { // ... } // 更新滾動區 updated = () => { if(this.props.native) return let c = {} let barSize = domUtils.getScrollBarSize() // 垂直滾動條 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)` // 隱藏系統滾動條 if(barSize) { this.$ref__wrap.style.marginRight = -barSize + 'px' } }else { c.barHeight = 0 this.$ref__barY.style.transform = '' this.$ref__wrap.style.marginRight = '' } // 水平滾動條 ... } // 鼠標滾動 handleScroll = (e) => { const { onScroll } = this.props typeof onScroll === 'function' && onScroll.call(this, e) this.updated() } render() { return ( // ... ) }}export default RScroll

這里是內容信息！這里是內容信息！這里是內容信息！

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

好了，以上就是基于react.js開發自定義美化滾動條組件。希望大家能喜歡~~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。