如何制作准确的滚动区？

Question

我想为我的 div 设置一个准确的滚动区域，这是我想要的位置： scroll zone in red

所以我最多有 4 个 div，因此它必须包含每个类别总共 10 个矩形（浓度、提升...）

我试图设置一个带有包装器的滚动条，但我不能让它正常工作。这是我到目前为止得到的：

what i got so far

我的代码：

.containerfocuslist {
    margin-top: 4rem;
    height: 650px;
    overflow-y: auto;
}

.wrapper {
    display: flex;
    height: 350px;
}

Answer 1

元素大小和滚动有许多 JavaScript 属性允许我们读取有关元素宽度、高度和其他几何特征的信息。

我们在 JavaScript 中移动或定位元素时经常需要它们。

示例元素作为演示属性的示例元素，我们将使用下面给出的元素：

<div id="example">
  ...Text...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

它有边框、填充和滚动。全套功能。没有边距，因为它们不是元素本身的一部分，并且没有它们的特殊属性。

更多信息click here

如何制作准确的滚动区？

How to make a accurate scroll zone?

html

css

scroll