div scroll

You can use the CSS overflow property to achieve div scrolling. Set the overflow property to auto or scroll, and when the content exceeds the height or width of the div, a scroll bar will appear.

For example, the following code will create a div with a height of 200px and a width of 300px, with a vertical scrollbar when the content exceeds the height:

<div style="height: 200px; width: 300px; overflow-y: auto;">
  <!-- 这里放置内容 -->
</div>

If you want both horizontal and vertical scrollbars to appear at the same time, you can set the overflow property to scroll:

<div style="height: 200px; width: 300px; overflow: scroll;">
  <!-- 这里放置内容 -->
</div>

You can use the CSS property overflow to control the scrolling of the div. The specific method is as follows:

1. Set a fixed height for the div in CSS to reach the height range that needs to be scrolled.

2. Set the CSS property overflow to auto or scroll for the div, which will make the div scroll within the height range.

3. If the scroll bar needs to be beautiful, you can use the CSS property::-webkit-scrollbar to beautify it.

Code example:

<div style="height: 200px; overflow: auto;">
   <!-- 这里放数据 -->
</div>

div::-webkit-scrollbar {
  width: 10px;
}

div::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

Among them, ::-webkit-scrollbar is used to set the overall style of the scroll bar, and ::-webkit-scrollbar-thumb is used to set the style of the scroll bar slider. You can set it according to your needs

You can hide the scrollbar or make the scrollbar thinner by CSS.

1. Hide the scrollbar

div::-webkit-scrollbar {
  display: none;
}

2. Make the scroll bar thinner

div::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  height: 6px; /* 设置滚动条高度 */
}

div::-webkit-scrollbar-thumb {
  border-radius: 3px; /* 设置滚动条滑块圆角 */
  background-color: rgba(0, 0, 0, 0.2); /* 设置滑块颜色 */
}

div::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.05); /* 设置滑块轨道颜色 */
}

The above code sets the width of the scroll bar to 6px, the height to 6px, the rounded corner of the slider to 3px, the color of the slider to gray translucent, and the color of the slider track to light gray translucent. You can adjust as needed.

To style an element with a class , simply add the class selector to the CSS selector, like so:.class-namediv

1. Hide the scrollbar

div.class-name::-webkit-scrollbar {
  display: none;
}

2. Make the scroll bar thinner

div.class-name::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  height: 6px; /* 设置滚动条高度 */
}

div.class-name::-webkit-scrollbar-thumb {
  border-radius: 3px; /* 设置滚动条滑块圆角 */
  background-color: rgba(0, 0, 0, 0.2); /* 设置滑块颜色 */
}

div.class-name::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.05); /* 设置滑块轨道颜色 */
}

The syntax for class selectors is to prefix the selector name .class-name, where class-nameis the class name of the element you want to select. Note that normally, the code to hide and shrink the scrollbars applies to all divelements, so they don't need to be added .class-name. divYou only need to use class selectors if you want to target specific elements.

Guess you like