React 引用 ant 组件 使用 react-custom-scrollbars美化(隐藏)滚动条

最新推荐文章于 2024-05-25 14:34:39 发布
最新推荐文章于 2024-05-25 14:34:39 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： react reactjs css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellolw888/article/details/108150599
版权

React 引用 ant UI组件 如何美化（隐藏）滚动条

React 引用 ant UI组件 设置overflow-y: auto; 滚动条非常突兀，为了页面效果，一定要美化
–美化前

在这里插入图片描述

首先：

安装一个依赖：yarn add react-custom-scrollbars

然后：

导入模块：import { Scrollbars } from ‘react-custom-scrollbars’

最后：

在你需要滚动的地方用< Scrollbars ></ Scrollbars >包起来

–这就是滚动条美化后的样子，是不是看不出来滚动条的存在

在这里插入图片描述

PS:觉得有用的点点赞哈…
hellolw888
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
推荐开源项目：react-custom-scrollbars - 自定义滚动条组件
gitblog_00022的博客
05-11 448
推荐开源项目：react-custom-scrollbars - 自定义滚动条组件 项目地址:https://gitcode.com/malte-wessel/react-custom-scrollbars 1、项目介绍 react-custom-scrollbars 是一款基于 React 的高度可定制化滚动条组件库。它允许你在保持原生浏览器滚动体验的同时，为你的应用提供美观和功能丰富的自定义滚...
react-custom-scrollbars：React滚动条组件
02-05
React自定义滚动条 无摩擦的本机浏览器滚动 移动设备的本机滚动条 （在客户端和服务器上运行） 60fps的requestAnimationFrame 没有多余的样式表 经过良好测试，代码覆盖率100％ · 安装 npm install react-custom-scrollbars --save 假设您正在将软件包管理器与或类的模块捆绑器一起使用，以使用。 如果您还没有使用或现代模块捆绑程序，而是希望使用单文件构建来将ReactCustomScrollbars用作全局对象，则可以从获取一个预构建的版本。 我们不建议将此方法用于任何严肃的应用程序，因为大多数与react-cust
【React】Ant Design 5.x版本table scroll滚动条样式自定义
最新发布
无限循环
05-25 792
Ant Design 5版中table表格滚动条scroll样式自定义
用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...
javascript react 手写前端浏览器滚动条,完美实现原生滚动条效果。
qq_42704945的博客
07-10 3294
其次是滑块滑动的距离也是一个比值，计算的是滑块在可滑动轨道的一个滑动比值，滑动滑块的时候同时也需要滑动内容区，内容区的滑动距离也是一个比值。这就是一个最终的实现效果，滚动条支持点击滑动，左边内容区也能同步滑动，鼠标滚动同时也支持，手写的滚动条同步滚动。主要的难点就是计算滑块的一个高度，根据不同的内容大小同比例算出滑块在容器中的一个比例。类比就是 滑块的一个大小/滑块可以滑动的一个大小=容器的一个大小/容器可滑动的一个大小。
React 页面滚动插件
谢子文的博客
11-30 1496
最开始感觉很easy, 上来就是原生 scrollIntoView()，但是发现其兼容性超级差，比如IE, Edge 这一微软派上不能平滑滚动，还有安卓，iOS 等浏览器上也支持得不是很友好。最近做 react 前端，有需求是软键盘弹起时，页面需要向上滚动，以避免软键盘挡住输入框。
react-scrollbars-custom:最好的React自定义滚动条组件
05-02
react-scrollbars-custom ×× ×× 本机浏览器的滚动行为-它不模拟滚动，仅显示自定义滚动条，仍以本机滚动 跨浏览器和跨平台-无关紧要的地方和方式，滚动条在各处看起来都一样 终极性能-60 FPS（使用RAF）和高度...
rc-scrollbars:React滚动条组件
05-07
rc滚动条 复兴项目 无摩擦的本机浏览器滚动 移动设备的本机滚动条 （在客户端和服务器上运行） requestAnimationFrame fps的requestAnimationFrame 没有多余的样式表 经过良好测试，代码覆盖率100％ · 安装 npm...
React滚动条组件
06-08
rc-scrollbars 重振项目 react-custom-scrollbars 无摩擦原生浏览器滚动移动设备原生滚动条完全可定制的自动隐藏自动高度通用（在客户端和服务器上运行） requestAnimationFrame 为 60fps 没有额外的样式表经过良好...
react-custom-scrollbars-2
04-29
react-custom-scrollbars-2 无摩擦的本机浏览器滚动 移动设备的本机滚动条 （在客户端和服务器上运行） requestAnimationFrame fps的requestAnimationFrame 没有多余的样式表 经过良好测试，代码覆盖率100％ · ...
react-perfect-scrollbar:完美滚动条的React包装
05-02
React完美滚动条 这是一个包装，允许在React中使用 。 要阅读版本小于1.0的文档，请访问 。 用法 安装软件包npm install react-perfect-scrollbar -S如果您具有用于css文件的加载器，请导入css文件： import 'react-perfect-scrollbar/dist/css/styles.css' ; 将模块导入您要使用的位置： import PerfectScrollbar from 'react-perfect-scrollbar' 将您的内容包装在此组件中： < PerfectScrollbar> ... SCROLLBAR CONTENT HERE ... < / PerfectScrollbar > 道具 接受以下道具： 选项 用于初始化的可选参数。 有关更多信息，请
react-reactscrollbarReact的滚动条组件
08-15
react-scrollbar - React的滚动条组件
react-reactcustomscrollbarsReact滚动条组件
08-15
react-custom-scrollbars - React滚动条组件
react-anchor-link-smooth-scroll:使用平滑滚动polyfillReact锚链的组件
05-02
使用React锚链的组件。 指示 安装依赖项： npm install react-anchor-link-smooth-scroll 添加脚本 import React from 'react' import ReactDOM from 'react-dom' import AnchorLink from 'react-anchor-link-...
react-基于react的自定义滚动条组件
08-14
本文将详细讲解如何基于React创建一个自定义滚动条组件，并探讨相关的关键知识点。 首先，React是一个流行的JavaScript库，用于构建用户界面，特别是单页应用。它采用声明式编程风格，使得代码易于理解和维护。在...
推荐项目：React-Perfect-Scrollbar - 精致的滚动条组件
gitblog_00013的博客
04-18 639
推荐项目：React-Perfect-Scrollbar - 精致的滚动条组件 项目地址:https://gitcode.com/goldenyz/react-perfect-scrollbar 项目简介 React-Perfect-Scrollbar 是一个专为 React 应用程序设计的高度可定制和性能出色的滚动条库。它提供了一种优雅的方式，使你的网页或应用的滚动体验更接近原生操作系统的风格，...
修改 antd 表格内滚动条样式
bujuan__的博客
07-22 2445
// 全局里设置滚动条好像不生效 去需要的地方设置 滚动条外层的宽度 :global{ ::-webkit-scrollbar { height: 9px; background: rgba(255, 255, 255, 0.03); } 滚动条里面的宽度 ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 12px; height: 20px;
Vue及Antd组件修改滚动条样式
小龙狗的博客
07-14 3924
Vue及Antd组件修改滚动条样式
Ant Design Table修改滚动条样式
m0_48164934的博客
04-20 5532
Ant Design Table修改滚动条样式目录一、目的二、步骤1.了解滚动条的组成部分2.样式修改3.实现效果二、总结 目录 一、目的 修改Ant表格的固定列滚动而产生的滚动条样式，包括粗细，颜色等 二、步骤 1.了解滚动条的组成部分 滚动条的组成： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有t
react-custom-scrollbars
07-27
- *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":...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值