Prosty pasek przewijania – simplebar-react

Dark Mode

simplebar (this link opens in a new window) by Grsmto (this link opens in a new window)

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

71 Subscribers 4930 Watchers 491 Forks Check out this repository on GitHub.com (this link opens in a new window)

SimpleBar zastępuje standardowy pasek przewijania, niestandardowym paskiem z stylami CSS oczywiście bez utraty wydajności. W przeciwieństwie do niektórych popularnych wtyczek, SimpleBar nie naśladuje przewijania w JavaScript, które powoduje szarpnięcia i dziwne zachowania podczas przewijania. Jednym słowem SimpleBar, dzięki swoim niesamowitym właściwością zachowuje swoją niesamowitość natywnego przewijania jako niestandardowy pasek przewijania. Pasek zachowuje natywne overflow: auto, zastępowany jest tylko wygląd paska nowymi stylami CSS.

SimpleBar używa czystego CSS do stylizacji paska przewijania. Można go łatwo dostosować jak tylko chcesz 🙂 . Możesz dać kilka styli na tej samej stronie lub zachować domyślny styl paska taki jak na Mac OS.

SimpleBar  jest lekki i wydajny, zminimalizowany zawiera tylko 6kb. Pasek został przetestowany na przeglądarkach: Chrome, Firefox, Safari, Edge, IE11.

Co jest jeszcze ważne SimpleBar nie jest do użytku na elemencie body.

Meta:

Funkcje i cechy:

• Automatyczne chowanie paska jak użytkownik nie przewija paska, można ustawić pasek też żeby był cały czas widoczny.
• Możesz kontrolować animacje za pomocą CSS.
• Istnieje możliwość zmiany domyślnych nazw klas, które używa pasek na swoje, pamiętaj aby też do tej zmiany skonfigurować swój CSS.
• Możesz wymusić widoczność ścieżki tak samo jak byś robił overflow: scroll, domyślnie pasek zachowuje się jak by miał ustawione overflow: auto.
• Możesz ustawić niestandardowy atrybut etykiet aria dla użytkowników korzystających z czytnika ekranu za pomocą ariaLabel.
• Można zdefiniować opóźnienie ukrycia paska.
• Można ustawić minimalny i maksymalny rozmiar paska przewijania w px.
• Można wymusić przewijanie paska tylko w pionie lub w poziomie.

Instalacja:

Aby dodać do swojego projektu ten widżet musisz użyć NPM-a lub YARN menadżera pakietów dla pluginów JavaScript.

npm install simplebar-react --save // npm
yarn add simplebar-react // yarn

Stosowania i podstawowe metody:

SimpleBar używamy jak każdego komponentu Reactowego.

<SimpleBar forceVisible="y" autoHide={false}>
  // your content
</SimpleBar>

Dodatkowe opcje przewidziane tylko dla komponentu reactowego.

scrollableNodeProps – Możesz przekazać referencje do podstawowego div-a elementu przewijanego. Przydatne jest to, jeśli chcesz mieć dostęp do zdarzeń wywoływanych na tym elemencie np. scroll i zastosować np. zdarzenie przewijania do dołu.

const scrollableNodeRef = React.createRef();

<SimpleBar scrollableNodeProps={{ ref: scrollableNodeRef }}>
  // your content
</SimpleBar>

Dostęp do instancji SimpleBar

const ref = useRef();

useEffect(() => {
  ref.current.recalculate();
  console.log(ref.current.el); // <- the root element you applied SimpleBar on
})

<SimpleBar ref={ref}>
  // your content
</SimpleBar>

Dostęp do ref z poziomu komponentu renderowanego

<SimpleBar>
  {({ scrollableNodeRef, contentNodeRef }) => {
    // Now you have access to scrollable and content nodes
    return <div></div>;
  }}
</SimpleBar>

Przykład w codesandbox.io.

Moja wersja demo, przykład wykorzystania w standardowym projekcie.

• demo-simplebar-react

Myślę że ten przykład wyjaśnią wszystkie wątpliwości z uruchomianiem pluginu. Po więcej zapraszam z zapoznaniem się z oficjalnym źródłem pluginu na github.

Pozdrawiam… 🙂