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. Dynamics 365本地部署版本配置OAuth 2 Password Grant以调用Web API

    微软动态CRM专家罗勇 ,回复330或者20190504可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 根据官方建议,不要再使用Dynamics 365 Custome ...

  2. swif(六)swift闭包

    // // main.swift // LessonSwiftSix // // Created by keyan on 15/9/13. // Copyright (c) 2015年 keyan. ...

  3. C语言中的volatile关键字简介

    C语言中的volatile关键字简介: (1)含义:         volatile关键字的意思是可能会被外来的意想不到的改变.它的作用是:优化器在使用该关键字定义的变量时,直接从内存中读取原始的数 ...

  4. Mysql—数据库管理与表管理

    数据库管理 表管理 删除表

  5. [C12] 大规模机器学习(Large Scale Machine Learning)

    大规模机器学习(Large Scale Machine Learning) 大型数据集的学习(Learning With Large Datasets) 如果你回顾一下最近5年或10年的机器学习历史. ...

  6. 28道java基础面试题-下

    28道java基础面试题下 15.Java语言如何进行异常处理,关键字:throws.throw.try.catch.finally分别如何使用? 答:Java通过面向对象的方法进行异常处理,把各种不 ...

  7. zz阿里妈妈深度树检索技术(TDM)及应用框架的探索实践

    分享嘉宾:何杰 阿里妈妈 高级算法专家 编辑整理:孙锴 内容来源:DataFun AI Talk 出品社区:DataFun 注:欢迎转载,转载请注明出处 导读:阿里妈妈是阿里巴巴集团旗下数字营销的大中 ...

  8. OpenStack I18N

    OpenStack I18N 官方文档: https://docs.openstack.org/oslo.i18n/latest/user/usage.html https://docs.openst ...

  9. A1010 Radix (25 分)

    一.技术总结 首先得写一个进制转换函数convert(),函数输入参数是字符串str和需要转化的进制(使用long long数据类型).函数内部知识,使用函数迭代器,即auto it = n.rbeg ...

  10. 代码问题【LDES//AAAI2019】

    paper:Li Y, Zhu J, Hoi S C H, et al. Robust Estimation of Similarity Transformation for Visual Objec ...