更改滚动可见部分(隐藏部分)上方和下方的样式元素

<div class="scrollable-container">
  <div class="content">
    <!-- 滚动可见部分的内容 -->
  </div>
</div>

.scrollable-container {
  height: 300px; /* 设置容器的高度 */
  overflow: auto; /* 开启滚动效果 */
}

.scrollable-container:before {
  content: ""; /* 添加伪元素 */
  display: block;
  height: 50px; /* 设置上方样式元素的高度 */
  background-color: #f1f1f1; /* 设置背景色 */
  border: 1px solid #ccc; /* 设置边框样式 */
  /* 其他样式属性 */
}

.scrollable-container:after {
  content: ""; /* 添加伪元素 */
  display: block;
  height: 50px; /* 设置下方样式元素的高度 */
  background-color: #f1f1f1; /* 设置背景色 */
  border: 1px solid #ccc; /* 设置边框样式 */
  /* 其他样式属性 */
}