半页垂直滑块带滚动和半页固定

以下是一个实现"半页垂直滑块带滚动和半页固定"的代码示例：

HTML代码：

<div class="container">
  <div class="scrollable">
    <!-- 添加需要滚动的内容 -->
    <p>这里是滚动内容...</p>
  </div>
  <div class="fixed">
    <!-- 添加固定内容 -->
    <p>这里是固定内容...</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  height: 50vh; /* 半页高度 */
}

.scrollable {
  flex: 1;
  overflow-y: scroll; /* 启用垂直滚动 */
  padding-right: 10px; /* 添加右侧滚动条的空间 */
}

.fixed {
  width: 50%; /* 半页宽度 */
  background: lightgray; /* 固定内容的背景颜色 */
  padding: 10px;
}

通过以上代码，container类将页面分为两个部分：scrollable和fixed。scrollable部分使用overflow-y: scroll;属性来启用垂直滚动，当内容超出容器高度时，会出现滚动条。fixed部分使用固定宽度和背景颜色来显示固定内容。

你可以根据需要自定义容器的大小、滚动内容和固定内容的样式。