react-custom-scrollbars滚动组件

最新推荐文章于 2024-04-11 09:40:36 发布
最新推荐文章于 2024-04-11 09:40:36 发布
阅读量2.2k 收藏
点赞数
分类专栏： 前端 组件 文章标签： react.js javascript 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43222302/article/details/121933788
版权

react-custom-scrollbars，是一款滚动区域组件，为了美化兼容各大浏览器，很遗憾，这个组件有个隐藏的兼容问题，并且我发现无法处理，

出现异常：没有满足滚动条件，出现底部，侧边滚动条，导致出现无法滚动的假滚动条，这是属于底层js/ts代码控制的，没办法在客户端处理，

异常分析：无非就是底部滚动条，不满足条件时width:0;但是出现异常了width!=0；就显示出了滚动条

异常场景：edg浏览器（部分电脑上必定出现，），很奇怪，我的电脑上edg同版本就没有，

建议还是别用了，我正打算自己写一个组件出来;
最近比较忙组件一直没什么时间写，目前写了一套纵轴的，没时间完善

吃柠檬的猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-reactcustomscrollbarsReact滚动条组件
08-15
react-custom-scrollbars - React滚动条组件
滚动组件 react-perfect-scrollbar 和冻结行、列
qq_41547882的博客
04-15 1555
https://www.npmjs.com/package/react-perfect-scrollbar ：用到滚动组件去作友好的滚动处理（没发觉有什么具体效果感觉） https://v4.mui.com/zh/components/tables/：用material-UI 的table组件 + 自定义CSS 实现冻结效果； import React, { useEffect, useState } from 'react'; import { Link as RouterLink } from 'rea
探索 React 快速滚动组件：React-Fast-Marquee
最新发布
gitblog_00070的博客
04-11 517
探索 React 快速滚动组件：React-Fast-Marquee 项目地址:https://gitcode.com/justin-chu/react-fast-marquee React-Fast-Marquee 是一个由 Justin Chu 开发的高性能 React 组件，它提供了类似传统 HTML <marquee> 标签的功能，即实现文字或图像的滚动效果，但比原生标签更强大...
滚动条组件，react-custom-scrollbars
AS_TS的博客
06-30 7228
发现一个简单的滚动条npm包，这可以让我们抛弃浏览器原始的丑陋滚动条 npm地址：https://www.npmjs.com/package/react-custom-scrollbars cnpm镜像地址：https://cnpmjs.org/package/react-custom-scrollbars gitHub上的高级用法：https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs gitHub上API文档：ht
react-scrollbars-custom:最好的React自定义滚动条组件
05-02
react-scrollbars-custom ×× ×× 本机浏览器的滚动行为-它不模拟滚动，仅显示自定义滚动条，仍以本机滚动 跨浏览器和跨平台-无关紧要的地方和方式，滚动条在各处看起来都一样 终极性能-60 FPS（使用RAF）和高度优化的代码 无需额外的样式表-现成的内联样式最少，也可以根据需要自己设置样式 完全可定制-想要河马作为滚动条拇指吗？ 好吧..我不判断你，你有空做！ 滚动条嵌套 总测试覆盖率 iOS的动量滚动 RTL支持（） 内容大小翻译（） 正确的页面缩放处理（不显示本地滚动条） 安装 npm install react-scrollbars-custom # or via yarn yarn add react-scrollbars-custom 安装注意事项： 该库是用ES6 +编写的，并提供了已编译和未编译的版本： package.json mai
react-custom-scrollbars：React滚动条组件
02-05
React自定义滚动条 无摩擦的本机浏览器滚动 移动设备的本机滚动条 （在客户端和服务器上运行） 60fps的requestAnimationFrame 没有多余的样式表 经过良好测试，代码覆盖率100％ · 安装 npm install react-custom-scrollbars --save 假设您正在将软件包管理器与或类的模块捆绑器一起使用，以使用。 如果您还没有使用或现代模块捆绑程序，而是希望使用单文件构建来将ReactCustomScrollbars用作全局对象，则可以从获取一个预构建的版本。 我们不建议将此方法用于任何严肃的应用程序，因为大多数与react-cust
react-custom-scrollbars样式
hahahhahahahha123456的博客
11-12 4071
首先npm i react-custom-scrollbars安装所需模块 import ScrollView from 'react-custom-scrollbars'; 把需要滚动加载的部分放到ScrollView中 <ScrollView onScroll={this.onScroll}> 。。。 </ScrollView> onScroll ...
react-custom-scrollbars-2
04-29
react-custom-scrollbars-2 无摩擦的本机浏览器滚动 移动设备的本机滚动条 （在客户端和服务器上运行） requestAnimationFrame fps的requestAnimationFrame 没有多余的样式表 经过良好测试，代码覆盖率100％ · ...
rc-scrollbars:React滚动条组件
05-07
rc滚动条 复兴项目 无摩擦的本机浏览器滚动 移动设备的本机滚动条 （在客户端和服务器上运行） requestAnimationFrame fps的requestAnimationFrame 没有多余的样式表 经过良好测试，代码覆盖率100％ · 安装 npm...
React滚动条组件
06-08
rc-scrollbars 重振项目 react-custom-scrollbars 无摩擦原生浏览器滚动移动设备原生滚动条完全可定制的自动隐藏自动高度通用（在客户端和服务器上运行） requestAnimationFrame 为 60fps 没有额外的样式表经过良好...
滚动到React中的某个位置-React开发
05-27
示例：查看React Storybook示例安装npm：npm我react-scroll-to-保存yarn：yarn add react-scroll-to API渲染道具：//滚动到浏览器窗口中的位置（20，500）导入React，{组件}来自“React”； 从“ react-scroll-to”...
react-reactcustomscroll利用原生OS滚动行为轻松定制浏览器滚动条
08-15
react-custom-scroll - 利用原生OS滚动行为轻松定制浏览器滚动条
react-reactscrollbarReact的滚动条组件
08-15
react-scrollbar - React的滚动条组件
react-scroll：React滚动组件
02-21
动画垂直滚动的组件。 安装 $ npm install react - scroll 跑 $ npm install $ npm test $ npm start 例子 结帐示例 现场例子 $ npm start 用法 // ES6 Imports import * as Scroll from 'react-scroll' ; import { ...
react-custom-scroller:超级简单的React组件，用于创建自定义滚动条跨浏览器和跨设备
05-06
安装yarn add react-custom-scroller好处极其轻巧（压缩后不到2KB）。 它使用本机滚动事件，因此所有事件都可以正常工作（鼠标滚轮，空格，向下翻页，向上翻页，箭头等）。 没有其他第三方依赖。 表现极好！用法...
react-horizontal-scrolling-menu:React的水平滚动菜单组件
04-18
npm install --save react-horizontal-scrolling-menu 在项目中： import React , { Component } from 'react' ; import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o
说说react-custom-scrollbars插件在react hooks版本中的使用
tuzi007a的博客
02-17 2034
react-custom-scrollbars插件读前说明基本使用属性介绍onScrollrenderViewrenderThumbVerticalautoHideautoHideTimeout 读前说明 github地址：https://github.com/malte-wessel/react-custom-scrollbars 作用： 快速实现被包裹区域的滚动效果 关于本篇： 在官网以及其他文章中，都是介绍该插件在react class版本中的使用， 未涉及到react hooks版本中的使用方法。
用react-custom-scrollbars插件美化 Ant Design Table 滚动条
热门推荐
三傻的博客
10-31 1万+
Ant Design Table 自带的滚动条不太美观，我们来用react-custom-scrollbars插件给它美化一下。 先看一下最终的效果，增加一下的信心： 安装 react-custom-scrollbars 不多说了，直接安装插件 npm install react-custom-scrollbars --save 安装完成之后，引入滚动条插件和表格组件 import React...
用react-custom-scrollbars插件美化 滚动条
jdrunk的博客
12-24 1333
react-custom-scrollbars官网 安装 npm install react-custom-scrollbars --save 使用 import React from 'react'; import { Scrollbars } from 'react-custom-scrollbars'; const Demo: React.FC = () => { return( <> <Scrollbars style={{ height:
react-custom-scrollbars
07-27
React Custom Scrollbars是一个npm包，它提供了一个自定义的滚动条组件，可以替代浏览器原始的滚动条。你可以在npm上找到它的地址：https://www.npmjs.com/package/react-custom-scrollbars。如果你在中国，也可以使用cnpm镜像地址：https://cnpmjs.org/package/react-custom-scrollbars。在GitHub上，你可以找到关于React Custom Scrollbars的高级用法：https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs，并且还有API文档：https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md。使用React Custom Scrollbars的基本用法是将需要使用滚动条的内容包裹在<Scrollbars>标签中。你可以在代码中导入Scrollbars组件，并在render方法中使用它，设置宽度和高度等样式属性。例如： ```javascript import { Scrollbars } from 'react-custom-scrollbars'; class App extends Component { render() { return ( <Scrollbars style={{ width: 500, height: 300 }}> <p>Some great content...</p> </Scrollbars> ); } } ``` 希望这些信息对你有帮助！ #### 引用[.reference_title] - *1* *2* [滚动条组件，react-custom-scrollbars](https://blog.csdn.net/AS_TS/article/details/107027203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [react-custom-scrollbars 滚动条组件的简单实现](https://blog.csdn.net/qq_42775791/article/details/120498076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值