Modify scroll bar style

Conditions for the appearance of scroll bars

1. The parent element has a fixed width and height ( Or set up max-height,max-width)
2. The child element exceeds the fixed width and height of the parent element , Or exceed the maximum width set by the parent element / Maximum height
3. Parent element Settings overflow: auto

notes ：overflow: auto It's actually overflow-x: auto and overflow-y: auto Short form of

But for x Axis Scroll bar and y Axis The scroll bar display is set separately

Change the scroll bar style

The default scroll bar style is a little ugly , have access to css Set the style of the scroll bar （ The scroll bar is on the parent element ）, The scrollbar pseudo elements that can be set are as follows ：

A simple example ：

  /*outer-box Parent element */
	
  /* Scroll bar overall style   This is the case Y Axis roll , Set width , When it comes to X When the axis rolls , Then set the height */
  .outer-box::-webkit-scrollbar {
    
    width: 8px;  
  }
  /* The slider in the scroll bar */
  .outer-box::-webkit-scrollbar-thumb {
    
    border-radius: 2px;
    background: #d5d5d5;
  }
  /* Scroll bar track */
  .outer-box::-webkit-scrollbar-track {
    
    border-radius: 2px;
    background: #f1f1f1;
  }

In general use ::-webkit-scrollbar、::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track These three pseudo elements can be set

::-webkit-scrollbar This pseudo element must be written , Otherwise, you cannot modify the default style