Google Chrome sets the scroll bar style XY axis whether to display

Preface: I thought I had been using the Firefox browser before, and when I was writing the page, I found that the width setting of 100vw was no problem, and then I found the problem after switching to Firefox. Occupies pixels, and Google's Y-axis scroll bar occupies pixels, so Google will display the X-axis scroll bar in the original 100vw,

 

 The solution is to hide the scroll bar of the X axis

::-webkit-scrollbar Set the width here to be the width of the Y-axis and set the height to be the height of the X-axis. As long as the height is set to 0, it means that the X-axis will not be displayed without the height. The same is true for the Y-axis setting to hide 

There is also setting the scroll bar style below, setting the X and Y axes will change

::-webkit-scrollbar {
  position: absolute;
  width: .5vw;
  height: 0;
  background-color: #f5f5f5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 25%;
  background-color: #f5f5f5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}