精华内容
下载资源
问答
  • scrollbars
    千次阅读
    2021-12-14 17:44:53

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

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

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

    异常场景:edg浏览器(部分电脑上必定出现,),很奇怪,我的电脑上edg同版本就没有,

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

    更多相关内容
  • react-scrollbars-custom ×× ×× 本机浏览器的滚动行为-它不模拟滚动,仅显示自定义滚动条,仍以本机滚动 跨浏览器和跨平台-无关紧要的地方和方式,滚动条在各处看起来都一样 终极性能-60 FPS(使用RAF)和高度...
  • 无摩擦的本机浏览器滚动移动设备的本机滚动条(在客户端和服务器上运行) 60fps的requestAnimationFrame 没有多余的样式表经过良好测试,代码覆盖率100% ·安装npm install react-custom-scrollbars --save 假设您...
  • 自定义滚动条 该工具旨在帮助您自定义下一个项目的滚动条。 这里的示范 :backhand_index_pointing_right: 关于该项目 该项目使用动态预览更改并生成最终代码。 学分 用 :red_heart_selector: 通过
  • rc滚动条 复兴项目 无摩擦的本机浏览器滚动 ... import { Scrollbars } from 'rc-scrollbars' ; class App extends Component { render ( ) { return ( < Scrollbars style = { { width : 500 ,
  • react-custom-scrollbars-2

    2021-04-29 11:53:33
    react-custom-scrollbars-2 无摩擦的本机浏览器滚动 移动设备的本机滚动条 (在客户端和服务器上运行) requestAnimationFrame fps的requestAnimationFrame 没有多余的样式表 经过良好测试,代码覆盖率100% · ...
  • 原生js scrollbars滚动条插件设置浏览器竖直滚动条美化
  • jQuery水平滚动条jQuery水平滚动条将水平滚动添加到任何元素。 这是我过去正在从事的另一个项目,并认为我会将其放在github上。
  • 原生js scrollbars滚动条插件设置浏览器竖直滚动条美化.zip
  • 在Firefox中隐藏滚动条 在Firefox中隐藏滚动条,同时仍然可以滚动! 安装 请捐款!
  • Win7 Scrollbars-crx插件

    2021-04-02 20:55:24
    Win7 Scrollbars不能这样做,但是Chrome无法知道这一点,因此出于警告的考虑,它会提供警告。 *这不适用于下拉菜单。 没错 据我所知,不可能用扩展程序修复它们。 *不适用于以chrome://开头的网址,Chrome的内置PDF...
  • 句法: smart_scrollbars(hContainer) 输入参数: hContainer - 容器的可选句柄(例如,面板、选项卡或图形)。 默认值 = 当前数字 (gcf) 注意:额外的输入可能会被指定并被忽略——这对于将 smart_scrollbars 指定...
  • Firefox GNOME滚动条 在这里,您可以找到一个Firefox脚本,该脚本提供了...将user_chrome内容( gnome-scrollbars.uc.js文件和utils文件夹)复制到Firefox配置文件chrome文件夹( FIREFOX_PROFILE\chrome )。 将fire
  • react-custom-scrollbars插件读前说明基本使用属性介绍onScrollrenderViewrenderThumbVerticalautoHideautoHideTimeout 读前说明 github地址:https://github.com/malte-wessel/react-custom-scrollbars 作用: ...


    读前说明

    github地址:https://github.com/malte-wessel/react-custom-scrollbars

    作用:

    快速实现被包裹区域的滚动效果

    关于本篇:

    在官网以及其他文章中,都是介绍该插件在react class版本中的使用,

    未涉及到react hooks版本中的使用方法。

    所以本篇就介绍一下该插件在react hooks版本中的实现。


    基本使用

    安装插件:

    npm install react-custom-scrollbars --save
    

    在需要使用的文件中,引入插件:

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

    需要让哪个元素实现滚动效果,就用<Scrollbars ></Scrollbars >包裹住该元素即可。

    写个demo:

    import React from 'react'
    import './scrollPlugin.css' // demo样式
    import { Scrollbars } from 'react-custom-scrollbars'; // 引入插件组件
    
    // react hooks版本的组件
    const ScrollPlugin = () => {
        return <div className='show-wrap'>
            <Scrollbars
                className='main' // 设置类名 方便在样式文件中写css代码
            >
                <ul className='show-ul'> // 要滚动的区域
                    {
                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {
                            return <li key={index}>
                                {item}
                            </li>
                        })
                    }
                </ul>
            </Scrollbars>
        </div>
    }
    
    export default ScrollPlugin
    

    实现的效果:

    在这里插入图片描述

    顺便贴一下demo中的css代码:

    /* scrollPlugin.css */
    .show-wrap {
        width: 300px;
        height: 400px;
        margin-left: 20px;
        margin-top: 20px;
    }
    
    .main {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: pink;
        border-radius: 12px;
    }
    
    .show-ul {
        list-style-type: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .show-ul li {
        width: 100%;
        height: 60px;
        margin-top: 10px;
        background-color: cyan;
        border-radius: 12px;
        line-height: 60px;
    }
    

    属性介绍

    官方md中给出了一堆属性,

    在这里插入图片描述
    但是没有注释说明。 有些陌生词汇,导致使用上可能不容易入手。

    在这里从上到下,介绍一下常用的几个属性。

    上面那些this.后面的变量,都是函数,用的时候要写成函数的形式。

    在react hooks版本中,没有this.


    onScroll

    滚动条滚动的时候,触发handleScroll函数

    demo:

    import React from 'react'
    import './scrollPlugin.css'
    import { Scrollbars } from 'react-custom-scrollbars';
    
    const ScrollPlugin = () => {
        const handleScroll = () => { // 这里写滚动函数
            console.log('滚动条动了')
        }
        return <div className='show-wrap'>
            <Scrollbars
                className='main'
                onScroll={handleScroll} // 这里写入属性
            >
                <ul className='show-ul'>
                    {
                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {
                            return <li key={index}>
                                {item}
                            </li>
                        })
                    }
                </ul>
            </Scrollbars>
        </div>
    }
    
    export default ScrollPlugin
    

    滚动一下,可以看到控制台有输出内容:

    在这里插入图片描述


    renderView

    这个函数是用来改变组件样式的。

    样式可以在css文件写,这里就不多介绍了。


    renderThumbVertical

    改变滚动条样式。

    写个demo:

    import React from 'react'
    import './scrollPlugin.css'
    import { Scrollbars } from 'react-custom-scrollbars';
    
    const ScrollPlugin = () => {
        const renderThumb = () => { // renderThumb改变样式时被调用的函数,必须是函数
            const thumbStyle = { // 设置滚动条样式
                backgroundColor: 'rgb(9,164,215)',
                borderRadius: '4px'
            }
            return <div style={{...thumbStyle}} />
        }
        return <div className='show-wrap'>
            <Scrollbars
                className='main'
                renderThumbVertical={renderThumb} // 把新的滚动条样式写入组件
            >
                <ul className='show-ul'>
                    {
                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {
                            return <li key={index}>
                                {item}
                            </li>
                        })
                    }
                </ul>
            </Scrollbars>
        </div>
    }
    
    export default ScrollPlugin
    

    效果图:

    在这里插入图片描述


    autoHide

    鼠标离开滚动区域后,滚动条会自动隐藏。

    鼠标进入滚动区域后,滚动条会自动显示。

    在插件组件中直接写入该属性即可使用:

    <Scrollbars
        className='main'
        autoHide // 自动隐藏属性
     >
        // 滚动内容
    </Scrollbars>
    

    autoHideTimeout

    鼠标离开滚动区域多少ms后,滚动条才会自动消失。

    该属性必须搭配autoHide属性,不然无效。

    <Scrollbars
        className='main'
        autoHide
        autoHideTimeout={1000} // 单位ms
    >
    

    over~

    展开全文
  • jQuery滚动条一个用于将自定义滚动条添加到div的jQuery插件Scrollbars,一个jQuery插件,用于向div中添加自定义滚动条。 版本:0.1 插件URI: : 作者:大卫·波西(David Posey) 作者URI: : 执照:GPL===========...
  • 滚动条组件 参考:gitHub API说明以及大佬的API中文讲解 ...import { Scrollbars } from "react-custom-scrollbars"; export default function App() { const ref = useRef(null); const [top, s

    滚动条组件
    参考:gitHub API说明以及大佬的API中文讲解

    import "./styles.css";
    import React, { useState, useEffect, useRef, useMemo } from "react";
    import { Scrollbars } from "react-custom-scrollbars";
    
    export default function App() {
      const ref = useRef(null);
      const [top, setTop] = useState(0);
      const [scrollTop, setScrollTop] = useState(0);
    
      const canToBottom = useMemo(() => {
        if (top !== 1) {
          return true;
        }
        return false;
      }, [top]);
    
      const canToTop = useMemo(() => {
        if (top !== 0) {
          return true;
        }
        return false;
      }, [top]);
    
      const toTop = () => {
        ref.current.scrollTop(scrollTop - 100);
      };
    
      const toButtom = () => {
        ref.current.scrollTop(100 + scrollTop);
      };
    
      const handleUpdate = (val) => {
        setTop(val.top);
        setScrollTop(val.scrollTop);
      };
    
      return (
        <div className="App">
          <Scrollbars
            style={{ height: 300 }}
            onUpdate={handleUpdate}
            ref={ref}
          >
            <p>
              世间纷乱复杂,我们在不断给自身做“加法”的同时,也要学会对周围的事物做“减法”,将复杂的东西简化,为我所用,并发挥超出原本程度的增幅效果,这才是真正的“高手”。
              在“码农圈”,学习如何使用.map().filter().reduce()函数,我们读到、看到和听到的一切都很复杂,无法理解这些概念,因为它们是独立的学习单元。
              听说这些是意味着上升至启蒙状态的入门知识。真希望自己听到的是实话:早点明白这三种方法其实都是识别和实现过程,循环遍历迭代的原因通常属于三个功能类别之一。
              回顾之前编写的代码,笔者发现95%的情况下,在对字符串或数组进行循环时,自己都会执行以下操作之一:将语句序列映射(map)到每个值,过滤(filter)满足特定条件的值,或者将数据集减少(reduce)到单个聚合值。
              这是取得进步的关键时刻,Map、filter和reduce只需要执行其中的一个任务即可!在三个月后回顾代码时,我们的阅读将变得更轻松。不必阅读for循环中的语句,只需理解它的高级意图,就可以看到map/filter/reduce方法,并能开始对该块试图实现的目标有所想法了。
              就像“哥伦布发现新大陆”一般,面对如此大的进步,我兴奋不已,你呢?世间纷乱复杂,我们在不断给自身做“加法”的同时,也要学会对周围的事物做“减法”,将复杂的东西简化,为我所用,并发挥超出原本程度的增幅效果,这才是真正的“高手”。
              在“码农圈”,学习如何使用.map().filter().reduce()函数,我们读到、看到和听到的一切都很复杂,无法理解这些概念,因为它们是独立的学习单元。
              听说这些是意味着上升至启蒙状态的入门知识。真希望自己听到的是实话:早点明白这三种方法其实都是识别和实现过程,循环遍历迭代的原因通常属于三个功能类别之一。
              回顾之前编写的代码,笔者发现95%的情况下,在对字符串或数组进行循环时,自己都会执行以下操作之一:将语句序列映射(map)到每个值,过滤(filter)满足特定条件的值,或者将数据集减少(reduce)到单个聚合值。
              这是取得进步的关键时刻,Map、filter和reduce只需要执行其中的一个任务即可!在三个月后回顾代码时,我们的阅读将变得更轻松。不必阅读for循环中的语句,只需理解它的高级意图,就可以看到map/filter/reduce方法,并能开始对该块试图实现的目标有所想法了。
              就像“哥伦布发现新大陆”一般,面对如此大的进步,我兴奋不已,你呢?
            </p>
          </Scrollbars>
          {canToBottom && <button onClick={toButtom}>向下</button>}
          {canToTop && <button onClick={toTop}>向上</button>}
        </div>
      );
    }
    

    也可以在我写的demo上修改调试:https://codesandbox.io/s/react-custom-scrollbars-gf3fh?file=/src/App.js

    秀一下最近做的一个大屏(昨天晚上发现左侧组件写的有bug,参照同事的左右滚动组件写的上下滚动,但是用的ahooks的API不是很好同时兼顾点击滚动一屏并且还能够鼠标滚动,所以又临时换组件,肝到了十一点555):
    在这里插入图片描述

    展开全文
  • scrollbars匹配gtk bunsenlabs蓝色黑暗主题。 google chrome主题当前不允许主题滚动条,此扩展为bunsenlabs蓝色黑暗gtk主题提供匹配的滚动条。 要获得主题,请参阅“来自此开发人员的相关 - >更多”。 Bunsen,...
  • android:scrollbars属性:自由控件已经超过了布局的大小就会滚动。要看到滚动效果,那你Linear里面的内容长度要超出整屏的高度就能实现滑动要实现ScrollView滚动条的隐藏,有两种方法:1、是在XML的ScrollView布局中...

    android:scrollbars属性:自由控件已经超过了布局的大小就会滚动。要看到滚动效果,那你Linear里面的内容长度要超出整屏的高度就能实现滑动

    要实现ScrollView滚动条的隐藏,有两种方法:

    1、是在XML的ScrollView布局中加入属性android:scrollbars="none"

    2、在代码中获取ScrollView后进行scroll.setVerticalScrollBarEnabled(false);

    问题描述:

    ScrollView隐藏滚动条后,如果之前设置了 键盘弹出 自动把滚动布局向上(滚动)会失效,而是把整个布局顶上去!

    这样一来,我们就不能设置android:scrollbars="none"了,那么我们如果就是想不显示滚动条,该怎么做呢?

    设置滚动条为透明色即可:

    android:scrollbarThumbVertical="@android:color/transparent"

    android:scrollbars="vertical"

    至此,文章结束,希望此文能帮助到你,如果对此文有不同见解,欢迎直接评论!

    展开全文
  • Fancy Scrollbars-crx插件

    2021-04-05 16:55:04
    语言:English 为Google Chrome浏览器提供精美的滚动条! 提供可覆盖本机浏览器的Google Chrome浏览器高级滚动条。
  • Subtle Scrollbars-crx插件

    2021-04-04 22:24:30
    语言:English 半薄滚动条,样式设置为将背景与页面内容融合在一起 将股票滚动条替换为6px宽的版本,该版本具有圆形末端,无箭头和试图与页面融合的背景。 条形为中灰色,悬停时为黑色。 下拉菜单等UI元素的滚动条...
  • Lubuntu Scrollbars-crx插件

    2021-04-04 18:47:23
    语言:English 使Chrome / Chromium滚动条与Lubuntu匹配。 这是Lubuntu的官方扩展程序,可让您的Google Chrome或Chromium Web浏览器使用与最新版本的Lubuntu匹配的滚动条。 此扩展不需要任何特殊权限即可运行,并使用...
  • Adwaita Scrollbars-crx插件

    2021-04-02 22:52:09
    语言:English 滚动条可与GNOME桌面环境集成。 这些滚动条旨在与我的Adwaita Google Chrome主题一起使用,网址为:https://chrome.google.com/webstore/detail/nbaobppppbkaionifpkgpinjikhgadmn
  • Force scrollbars-crx插件

    2021-04-02 19:54:21
    语言:Bahasa Indonesia,Bahasa Melayu,Deutsch,English,English (UK),English (United States),Filipino,Français,Kiswahili,Nederlands,Norsk,Tiếng Việt,Türkçe,català,dansk,eesti,español,hrvatski,...
  • Force Scrollbars-crx插件

    2021-04-02 07:11:51
    语言:English 强制首页滚动条 此扩展强制滚动条在当前选项卡上
  • 滚动条组件,react-custom-scrollbars

    千次阅读 2020-06-30 14:57:38
    npm地址:https://www.npmjs.com/package/react-custom-scrollbars cnpm镜像地址:https://cnpmjs.org/package/react-custom-scrollbars gitHub上的高级用法:...
  • [Primefaces]如何避免開啟Dialog時的兩層Scrollbars1
  • Styling the scrollbars /** * Styling the scrollbars */ static void lv_example_scroll_4(void) { lv_obj_t* obj = lv_obj_create(lv_scr_act()); // 创建obj对象 lv_obj_set_size(obj, 200, 100); // 设置大小...
  • 语言:English 使您的滚动条与Arc Dark主题匹配的Chrome扩展程序 使您的滚动条与Arc Dark主题匹配的Chrome扩展程序

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,265
精华内容 19,306
关键字:

scrollbars

友情链接: fang.zip