preface

Project to do recently, there is a list of scenarios in the presence of a scroll bar will squeeze the width of the content of the list, and the UI design of the scroll bar is in the user list the mouse moved to the area to appear, so that when the mouse moved into/out of the list area will have a contract/the change of the recovery, visually see will have a feeling of jitter. Design saw, shook his head, feel not quite OK. As a reliable front-end siege lion, I can only use a variety of optimization schemes to optimize, and finally let the design sister smile

Using the overlay

Looking through the MDN documentation, I saw that the overflow property has a value called overlay. Although I rarely see people using it, it seems to be the effect I want from the documentation. Go straight to the effect.

// html <html> <body> <div class="scrollbar"> <div class="content-list"> <div>this is a item hahaha</div> <div>this is a  item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> <div>this is a item hahaha</div> </div> </div> </body> </html>Copy the code
// css .scrollbar { height: 180px; width: 165px; background: yellow; // If set to Auto /scroll, the scroll bar will take up the width of the list, causing the list to be squeezed. // Overlay will float on the content and not be squeezed. overflow: overlay; //overflow: auto; } .scrollbar::-webkit-scrollbar { -webkit-appearance: none; Background: rgba (255,0,0,0); width: 8x; height: 8x; }. Scrollbar ::-webkit-scrollbar-thumb {background: rgba(255,0,0,0.6); width: 8x; display: none; } .scrollbar:hover::-webkit-scrollbar-thumb { display: block; width: 8x; } .scrollbar::-webkit-scrollbar-track { background-color: transparent; display: none; } .scrollbar:hover::-webkit-scrollbar-track { display: block; } .content-list > div { border-bottom: 1px solid; }Copy the code

overflow: overlay; The effect of:



overflow: auto; The effect of:



Nice! Sure enough, it’s what I wanted. Look at the documentation, it’s an experimental and obsolete style. Caniuse is currently compatible only with Chrome.

So this awesome property is ok on Chromium-based browsers, but not on other browsers. If you try it, safari will revert to Auto. Worse in Firefox, there is no scroll bar…

This property is useful but not perfect, so we’ll have to look at other solutions.

Self drawing scroll bar

On second thought, if I use several divs to simulate the scrollbar and then calculate the scrollbar position and scrollbar range, it should be feasible. And then all the styles of the scroll bar are under your control. Then on the net to find a pioneer, a good guy, as expected! Finding a perfect-scrollbar seemed like a good solution to my problem. Of course, out of awe of browser dads, we currently use overlay properties in the Browser of the Chromium kernel, while other browsers use the perfect-Scrollbar. If you have other plans, please leave a message to communicate with us