:: -webkit-scrollbar-track-piece-scrollbar has no track part of the slider. :: -webkit-scrollbar-track-scrollbar track. :: -webkit-scrollbar-thumb-scroll slider on scrollbar.
:: -webkit-scrollbar-button-button on scrollbar (up and down arrows). This is Chrome's default scrollbar style, of course, we should also know that the scrollbar should have four arrows, the top two, the bottom two, are used for self-increasing or self-reducing.Ĭustom scrollbars, we usually use a lot of custom scrollbars track, color, size, etc., but the arrows are usually hidden, so we need to find out what CSS selectors browsers have for scrollbars. Option twoĬonsidering that there are two arrows above and below the original scroll bar, can we reconstruct the arrow so that its height is equal to the size of the rounded corner and is transparent and invisible at the same time, so that we can achieve a certain distance from the bottom of the scroll bar, which will not be cut by the external rounded corner, and also ensure the complete rolling area? Ensure user experience.
In the panel area, our internal scroll bar, because the rounded corners of the external elements have been cut off, this is not visually feasible, then we want to solve it.Īdding a margin to the element gives the element a certain distance from the bottom, which we think is the size of the corner, which can solve the problem, but it also causes the element to have a gap at the bottom, rather than a complete scrollable area, and the visual experience is still poor. What problems will we encounter when we use the internal scrollbars of elements? How can we customize the scrollbars? Elemental rounded corners and scrollbarsįor example, Xunlei client, in addition to the right scrollbar is the page scrollbar, the other two are elements of internal scrollbar. When we write web pages, besides the original scrollbars of the page, such as HTML scrollbars and BODY scrollbars, there is a more common scrollbar, that is, the internal scrollbars of elements.
0 kommentar(er)
