Recently, I met the scrollbar of a small program, so I’ll talk about it here.

  • Open the official demo, read the official document, no explanation, this is the official style. There is no property that controls the show/hide scroll bar.

  • Since it is a component, it is CSS that controls it. Take a look at the introduction of Scroll in CSS, which has the following property reference links

1. : -webkit-scrollBar Overall part of the scrollbar. 2. :- webkit-Scrollbar-button Buttons at both ends of the scrollbar track that allow fine tuning of the position of the small square by clicking. 3. : -webkit-Scrollbar-corner, i.e. the intersection of two scroll bars. 4. :-webkit-scrollbar- Thumb Small squares inside the scrollbar that can be moved up and down (or left and right, depending on whether it's vertical or horizontal). 5. :-webkit-scrollbar-track The track of the scrollbar (with thumb inside). 6. :-webkit-scrollbar-track-piece Inner track, middle part of scrollbar (except)Copy the code

  • The above is normal CSS usage, use in the small program how to use? Again, write in WXSS.

    For example: Hide slider:

    ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
Copy the code

    or

    /* Define the size of the scrollbar */ :-webkit-scrollbar{width: 6px; height: 6px; background-color: #ffffff; } /* Define scrollbar inner shadow + rounded corner */ :-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3); border-radius: 10px; background-color: yellow; } /* Define slider inner shadow + rounded corner */ ::-webkit-scrollbar-thumb{border-radius: 10px; -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3); background-color: #ff5500; }Copy the code