react-custom-scrollbars的作用

  1. 流畅的本机浏览器滚动
  2. 移动设备的本机滚动条
  3. 完全可定制
  4. 自动隐藏
  5. 自动高度
  6. 通用(在客户端和服务器上运行)
  7. requestAnimationFrame 60fps
  8. 没有多余的样式表
  9. 经过良好测试,代码覆盖率100%

安装

npm install react-custom-scrollbars --save    

基本用法

import { Scrollbars } from 'react-custom-scrollbars';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</Scrollbars>
);
}
}  

 可配置:

import { Scrollbars } from 'react-custom-scrollbars';

class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
onScroll={this.handleScroll}
onScrollFrame={this.handleScrollFrame}
onScrollStart={this.handleScrollStart}
onScrollStop={this.handleScrollStop}
onUpdate={this.handleUpdate}
renderView={this.renderView}
renderTrackHorizontal={this.renderTrackHorizontal}
renderTrackVertical={this.renderTrackVertical}
renderThumbHorizontal={this.renderThumbHorizontal}
renderThumbVertical={this.renderThumbVertical}
autoHide
autoHideTimeout={1000}
autoHideDuration={200}
autoHeight
autoHeightMin={0}
autoHeightMax={200}
thumbMinSize={30}
universal={true}
{...this.props}>
);
}
}

  

react-custom-scrollbars的使用的更多相关文章

  1. how to create react custom hooks with arguments

    how to create react custom hooks with arguments React Hooks & Custom Hooks // reusable custom ho ...

  2. react第三方库

    作者:慕课网链接:https://www.zhihu.com/question/59073695/answer/1071631250来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  3. iScroll.js 用法参考 (share)

    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...

  4. iscroll4框架解析[webapp开发](转)

    概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一 ...

  5. iScroll相关

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. iScroll的最新版本是2011.07.03发布的4.1.7版.最新版比以 ...

  6. iScroll.js 用法参考

    本文原文链接:http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html 概要 iScroll 4 这个版本完全重写了iScr ...

  7. mCustomScrollbar的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 30款javascript脚本插件 jquery插件大全

      Shifty Nav - a Fully Responsive JS CSS3 Mega Menu Show Demo Shifty Nav is a fully responsive CSS3 ...

  9. iScroll 4.2.5 中文API

    概况 资料来源 http://cubiq.org/iscroll-4 http://www.cnblogs.com/wanghun/archive/2012/10/17/2727416.html ht ...

  10. iScroll.js插件使用方法

    iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...

随机推荐

  1. iOS 常用算法之设计一个算法,验证某字符是否为合法IPV4字符

    浅析 : 一个IPV4字符由3个大于0小于255的数字 以及 3个点构成, 所有我们需要判断小数点数量是否满足条件, 以及小数点隔开的每部分是否满足条件即可. 思路: 1. 校验是否有3个小数点; 2 ...

  2. Discuz! 全局变量说明

    $_G 保存了 Discuz! 中所有的预处理数据 缓存能够很好的提高程序的性能,一些配置数据没必要每次都查询数据库,只要在修改了的时候更新下缓存即可. Discuz! 中所有的缓存保存在 $_G[c ...

  3. [20190929]bash使用bc计算的相关问题.txt

    [20190929]bash使用bc计算的相关问题.txt --//快放假没什么事情,使用bash写一些小程序,转化number到oracle number编码,使用bc计算功能,发现一些小问题--/ ...

  4. js 常用工具方法

    1.格式化字符串 String.prototype.format = function () { let args = arguments; return this.replace(/\{(\d+)\ ...

  5. BouncyCastle配置

    1.BouncyCastle简介 BouncyCastle是一款开源的密码包,其中包含了大量的密码算法,使用BouncyCastle的目的就是为了扩充算法支持 下载地址最新加密组件包 http://w ...

  6. Docker 简单发布dotnet core项目 文本版

    原文:https://www.cnblogs.com/chuankang/p/9474591.html docker发布dotnet core简单流程 照着步骤来基本没错 但是有几个要注意的地方: v ...

  7. Paper | Blind Quality Assessment Based on Pseudo-Reference Image

    目录 1. 技术细节 1.1 失真识别 1.2 得到对应的PRI并评估质量 块效应 模糊和噪声 1.3 扩展为通用的质量评价指标--BPRI 归一化3种质量评分 判断失真类型 加权求和 2. 总结 这 ...

  8. P1验证性内容

    #include<stdio.h> int main() { printf("201983270555"); return 0; } #include<stdio ...

  9. Tensorflow faster rcnn系列一

    注意:本文主要是学习用,发现了一个在faster rcnn训练流程写的比较详细的博客. 大部分内容来自以下博客连接:https://blog.csdn.net/weixin_37203756/arti ...

  10. DNA Sorting POJ - 1007

    DNA Sorting Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 114211   Accepted: 45704 De ...