Giter Club home page Giter Club logo

mac-scrollbar's Introduction

mac-scrollbar

English | 中文

npm mac-scrollbar mac-scrollbar

Scrollbar React component with macOS style.

Why mac-scrollbar

The scroll bar of each browser has a unique style and the width is also inconsistent, thus compressing the display of the content area. Now, we need a beautiful and simple scroll bar from macOS style.

  • Use native browser to scroll
  • Does not affect the design layout
  • No additional DOM hierarchy
  • Automatically adapt to change in width and height
  • 2KB compressed size
  • Support Chrome, Firefox >= 64, Microsoft Edge >= 79

Note This component is not compatible with IE11, it needs to be compatible with lower version browsers.

demo

Usage

yarn add mac-scrollbar

Import style

import 'mac-scrollbar/dist/mac-scrollbar.css';

Basic

import { MacScrollbar } from 'mac-scrollbar';

function Foo() {
  return (
    <MacScrollbar>
      <div>Content</div>
    </MacScrollbar>
  );
}

Global window scrollbar

import { GlobalScrollbar } from 'mac-scrollbar';

function App() {
  return <GlobalScrollbar />;
}

API

Common

Name Type Description
skin 'light' | 'dark' Adapt to the background color of the container. Default 'light'
trackGap number | TrackGap | ((showBarX: boolean, showBarY: boolean) => TrackGap) Gap at the cross end of the scroll bar. Default 16
trackStyle (horizontal?: boolean) => CSSProperties
thumbStyle (horizontal?: boolean) => CSSProperties
minThumbSize number Minimum thumb bar size. Default 20
suppressAutoHide boolean When set to true, the scrollbar will not be automatically hidden.

MacScrollbar

Name Type Description
suppressScrollX number When set to true, the scrollbar in X-axis will not be available, regardless of the content width.
suppressScrollY number When set to true, the scroll bar in Y-axis will not be available, regardless of the content height.
as string Custom element type. Default 'div'

mac-scrollbar's People

Contributors

minjieliu avatar wangkqshi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mac-scrollbar's Issues

如何不让鼠标移入显示滚动条

大佬,当鼠标移入ms插件包裹的节点时,滚动条会立刻显示,请问如何不让鼠标移入显示滚动条,而是在滚轮滚动时才显示

GlobalScrollbar 类型错误

image
GlobalScrollbartrackGap官方类型为number,但实测只有

export interface ScrollbarBase extends GlobalScrollbarBase, React.HtmlHTMLAttributes<HTMLElement> {
    trackGap?: [startX: number, endX: number, startY: number, endY: number];
}

类型才会生效(截图注释部分为生效写法)。

快速上下滚动失去响应

使用滚轮快速上下滚动,滚动条会暂时失去响应。过1-2s重新可以响应,不知道是不是计算量过大问题

Next.js使用GlobalScrollbar报错

image

import { GlobalScrollbar } from 'mac-scrollbar';
import 'mac-scrollbar/dist/mac-scrollbar.css';

return <GlobalScrollbar />;

0.12.5版本在Next.js中使用会报水合错误,0.12.3没有此问题。

能否考虑添加一种全局的样式配置方式

感谢作者提供这个库。

目前我有多个页面用到了这个滚动条,比如宽度高度样式之类的设置每次都复制一下感觉不是很优雅,能否考虑添加一种使用js以全局的方式来配置的功能。

目前想到了两种设计,
一种是使用类似 ThemeProvider 的方法,在最外层包裹。好处是可以响应式变更,缺点是需要多一层嵌套包裹,并且对于后续转换成多框架通用会带来负担(如果作者有这个考虑的话);
另一种是暴露一个类(一个抽象类或者单例)提供默认值并允许用户修改它,在各组件的内部按照 (组件配置 > 全局配置 > 默认) 的顺序来得到最终生效的值。

不符合预期的显示效果

image

image

<MacScrollbar
  trackStyle={(horizontal) => ({ [horizontal ? "height" : "width"]: 0 })}
  thumbStyle={(horizontal) => ({ [horizontal ? "height" : "width"]: 3 })}
  trackGap={[4, 4, 4, 4]}
>
  {cloneElement(children)}
</MacScrollbar>;

黑夜模式下hover有带颜色的背景出现,白天其实也有,不过因为都是白色所以被忽略掉了

滚动条被页面裁减

image

image

希望在只有单个滚动条的情况下与页面也能有一定间隔,因为浏览器的边角是圆角裁切了部分(或者有圆角的弹窗等),移动到底部时导致看不完全滚动条,设置了trackEndGap这个参数后页面没有明显变化。

Scrollbar shows for a few seconds on the first render and than dissapears

Here you can see my issue:

ezgif com-gif-maker

When page renders – scrollbar shows for a few seconds and than dissapears. Is there any way I can override this behavior? I want it to be shown only when user interacts with container.

I am using <MacScrollbar /> component with minor thumb color customization via thumbStyle prop.

need an "as" prop

Current, MacScrollBar servers as a div container & inject the actual scrollbar element as its child.

The problem is it's always a "div" element, I haven't found a way to custimize the element type.

Can you provide an "as" prop that let me customize the element type? After all, html5 semantic tags are there for a reason.

Something like this will do:

<MacScrollbar as="main">
  <div>
   {content}
  </div>
</MacScrollbar>

样式问题

class名ms-container 后面有个空格,请trimEnd()一下

宽度计算问题

image
父级宽度和子级宽度都是100%的时候会出x轴滚动条,大概有1px的移动距离

Not working when using tailwindcss

I have project using antd and tailwind, when i add mac-scrollbar into my component is not working but when i remove tailwind mac-scrollbar is working. How to fix that?
Thanks

[需求功能]可否暴露滚动位置事件?

希望暴露带防抖的滚动位置事件,这样方便用户在滚动到容器顶部或者容器底部的时候做下拉刷新上拉加载功能,无需再去找其他相关此相关功能库,也减少集成其他库出错几率。

Is there any way to set fixed width or max-width to the thumb?

I am using <GlobalScrollba /> component, it is too large when there is only a small overflow:

ezgif com-gif-maker

When I am trying to customize width by setting it like a so...

     <GlobalScrollbar
        thumbStyle={vertical => {
          if (vertical) {
            return {
              width: '200px'
            };
          }

          return {
            backgroundColor: '#AAB7D4',
          };
        }}
      />

... I am getting this strange behavior:

width_issue

Is there any way I can set width or max-width properly?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.