Writing in the front

Why optimize scrollbars on Windows?

Windows scrollbars are notoriously ugly compared to Mac OS.

No contrast, no harm

Why do you want to scroll like you do on Mac OS?

Windows scrollbars are wide, long and fixed, making them easy to squeeze into display areas. Scrolling bars on Mac OS browsers don’t show up by default, they only show up when swiping, and they’re translucent and don’t take up space for content

It was meant to be. It was meant to be

Summary requirements:

  • Style beautification
  • Display the scroll bar only when sliding
  • Scrollbars don’t take up content space

Implementation scheme

After a search, two mainstream solutions were found:

  • CSS solutions – can satisfy the first point, can not satisfy the second and third points;
  • JS plug-in solutions, such as the Iscroll family — can meet all requirements;

The iscroll family consists of the following three plug-ins, which are packaged in layers, the last one being the least difficult, and the last one being the least difficult.

  • iccroll
  • better-scroll
  • react-with-better-scroll

Although react-with-better scroll star is less, the source code is still more accurate, recommend it;

Also note the difference between the NPM package name and the project. The NPM command is:

npm i react-with-better-scroll --save
Copy the code

Code implementation

BetterScroll is designed for h5 mobile browsers, and the Github repository example also shows an implementation of pull-down Refresh/pull-up load. This feature is also turned on by default, which is a bit less front-end friendly, but it doesn’t really matter, so let’s see the API documentation for DIY.

<BetterScrollList
  bscrollListRef={bsListInstance} // useRef
  scrollbar={{ fade: true }} // Enable default hiding
  options={{
    mouseWheel: true.// Support mouse wheel events
    bounce: false.// Close the springback animation
    momentum: false.// Quick slide rebound
  }}
>
  <ul>
    {items.map((item, index) => (
      <li key={item.id} className="item">{index}</li>
    ))}
  </ul>
</BetterScrollList>
Copy the code

Because react-with-better-Scroll encapsulates better-Scroll, the core configuration options still need to find the better-Scroll document. Here is the latest document address:

  • The react – with – better – scroll document
  • Better to scroll the document

Jumping pit guide

  1. The react-with-better-Scroll project address is difficult to find, and it is easy to get angry when in a hurry.
  • The project name and NPM package name are inconsistent
  • There are also many projects with the same name
  1. Better Scroll document address is not easy to find, the top Chinese document address, jump to README Chinese version is a little anxious, it is recommended to click 2.xDocs or the document address on the upper right, and then switch the language to Chinese to view The Chinese document.

The above two holes are also a joke, probably because I am always cleaning up the browser Tab, always need to find the document, so it is a bit unpleasant. Note some of the technical time points below:

  1. Turn off pull-down, pull-up and pull-down drawing: I thought this API was only for animation control, but I needed to turn off the whole function, so I looked through the document for many times, and finally found the instructions in the picture below that can be turned off, which made me easy to find.

However, even if bounce is set to false, it does not completely cancel the effect of pull-down/pull-up drawing. Fast scrolling and pull-down range are still very large, which does not meet the front-end requirements. A quick pull-down/pull-up animation is also shown later in the document. 🥵 🥵 🥵

. options={{bounce:false.momentum:false,}}...Copy the code

That’s when the pull-up/pull-down effect is completely turned off. This is the first pit.

  1. The second is to dynamically update the content of the sliding area, the scrollbar can not timely calculate the height of the content, the content can not slide, the content can slide less embarrassing situation…

After reviewing the documentation, the refresh method hits the nail on the head:So after setData updates the content area, the refresh method is called to recalculate the content height; Just when I am full of joy, scroll bar or lag a 😩, is my posture wrong? No! No! No… Finally think of delay method, really good!

Here 😏 want crooked 😏 please feel free to queue up in the comments section ha, I see you!

const betterScrollDelayRefresh = () = > {
  if(bsListInstance? .current) {setTimeout(() = >{ bsListInstance? .current? .refresh(); },50); }};Copy the code

Use useRef from React Hooks; use.current to get instance objects;

Finally, this is the use of setTimeOut is really helpless, also please dig friends correct. So far this ape finally escaped this disaster, perfect realization of the product three function points.