Contradiction between Element Round Corner and Internal Scroll Bar

Article directory

Summary
Elemental rounded corners and scrollbars

Scheme 1
Option two

Scheme realization
Custom Scrollbar Extension
remaining problems

Summary

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. What problems will we encounter when we use the internal scrollbars of elements? How can we customize the scrollbars?

Elemental rounded corners and scrollbars

For example, Xunlei client, in addition to the right scrollbar is the page scrollbar, the other two are elements of internal scrollbar.

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.

Scheme 1

Adding 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.

Option two

Considering 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.

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.

Scheme realization

Custom 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.

:: -webkit-scrollbar-whole scrollbar.
:: -webkit-scrollbar-button-button on scrollbar (up and down arrows).
:: -webkit-scrollbar-thumb-scroll slider on scrollbar.
:: -webkit-scrollbar-track-scrollbar track.
:: -webkit-scrollbar-track-piece-scrollbar has no track part of the slider.
:: -webkit-scrollbar-corner-the part that intersects when both vertical and horizontal scrollbars exist.
:: - webkit-resizer - part of the corner part of some elements (e.g. textarea's draggable button).

In addition to the usual: -webkit-scrollbar,: -webkit-scrollbar-thumb,: -webkit-scrollbar-track, we also found the selector we wanted: -webkit-scrollbar-button.

We just need to hide the four arrows of the scroll bar and three arrows. Let's get to know the selectors first.

// Scrollbar all arrow buttons
::-webkit-scrollbar-button

// Vertical scrollbar arrow
::-webkit-scrollbar-button:vertical 

// Arrow above vertical scrollbar
::-webkit-scrollbar-button:vertical:start

// Gradient arrow over vertical scrollbar
::-webkit-scrollbar-button:vertical:start:increment

// Decrease arrow above vertical scroll bar
::-webkit-scrollbar-button:vertical:start:decrement

// The arrow below the vertical scroll bar
::-webkit-scrollbar-button:vertical:end

// Incremental arrow under vertical scroll bar
::-webkit-scrollbar-button:vertical:end:increment

// Gradient arrow under vertical scroll bar
::-webkit-scrollbar-button:vertical:end:decrement

Code implementation:

// Hide all arrow buttons
::-webkit-scrollbar-button{
	display: none;
}
// The incremental or diminishing arrows below the vertical scroll bar show one of them.
::-webkit-scrollbar-button:vertical:end:increment{
	display: block;
	height: 5px;
    background-color: transparent;
}

Custom Scrollbar Extension

Reference: https://www.cnblogs.com/rubylouvre/archive/2011/03/01/1968057.html

<!doctype html>
<html>
  <head>
    <title>Custom scrollbar</title>
 
  </head>
  <body>
  <style>
    /* Turn on a 13x13 scrollbar */
    ::-webkit-scrollbar {
      width: 13px;/*Effective for vertical flow strips*/
      height: 13px;/*Effective for horizontal flow strips*/
    }
    /*Vertical scrollbar button*/
    ::-webkit-scrollbar-button:vertical {
      background-color: red;
      border: 1px dashed blue;
    }
    /*CSS In the coordinate system, the upper left corner is (0,0), increasing from right to bottom and decreasing from top to left.*/
    /*Display the incremental button above the scroll bar*/
    ::-webkit-scrollbar-button:start:decrement,
    /*Show the Gradient Button above the Scrollbar*/
    ::-webkit-scrollbar-button:end:increment {
      display: block
    }
 
    /*Hide the incremental button above the scrollbar*/
    ::-webkit-scrollbar-button:vertical:start:increment,
    ::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }
    
    /* Define the Style of Vertical Scrollbar Incremental Torsion */
    ::-webkit-scrollbar-button:vertical:increment {
      background-color: white;
      border: 1px dashed blue;
    }
 
    /* Define the Style of Vertical Scroll Bar Decreasing Torsion */
    ::-webkit-scrollbar-button:vertical:decrement {
      background-color: purple;
      border: 1px dashed blue;
    }
    /*　　scrollbar-track　　　　It's scrollbar-track-piece.*/
    /*　　scrollbar-track-piece　Above are four scrollbar-track-piece:start and scrollbar-track-piece:end and scrollbar-thumb*/
    /* The First Layer Track of Vertical Rolling Bar*/
    ::-webkit-scrollbar-track:vertical {
      background-color: blue;
      border: 1px dashed pink;
    }
 
 
    /* The Second Layer Orbit of Vertical Rolling Bar*/
    ::-webkit-scrollbar-track-piece {
      background-color: green;
    }
    /* The upper section of the third layer track of the vertical scrollbar*/
    ::-webkit-scrollbar-track-piece:vertical:start {
      border: 1px solid #000;
    }
 
    /* The lower part of the third layer track of the vertical scrollbar*/
    ::-webkit-scrollbar-track-piece:vertical:end {
      border: 1px dashed pink;
    }
 
    /* Slide block of vertical scrollbar */
    ::-webkit-scrollbar-thumb:vertical {
      height: 50px;
      background-color: yellow;
    }
 
    /* Corner */
    ::-webkit-scrollbar-corner:vertical {
      background-color: black;
    }
    /*  http://www.cssportal.com/css-properties/resize.htm  */
    /* Resizer */
    ::-webkit-scrollbar-resizer:vertical {
      background-color:orange;
    }
  </style>
 
 
  <div style="width:200px;height: 200px;overflow: scroll;resize:both;">
    <div style="background: red;width:400px;height: 400px;"></div>
  </div>
</body>
</html>

remaining problems

At present, I still have a question that internal scrollbars, by default, are edged, which to a certain extent does not meet the visual requirements, and it is not very good to operate, because our custom scrollbars generally defined will not be very broad.

Of course, through one more layer of container wrapping, the outer container first has a margin, the rolling bar inside will naturally have margins with the boundary, this is the current solution I adopted, looking forward to a better solution.

Added by macdumbpling on Mon, 23 Sep 2019 06:50:27 +0300

Programming VIP