css实现固定同时滚动条 |css样式的归类

html {
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.content {
height: 2000px;
width: 100%;
background-color: #eee;
}

首先，大家把HTML页面的overflow属性设置为hidden。这将禁止页面超出视口的部分向上或向下滚动。

接着，大家在body元素上设置了一些必要的CSS。大家为其设置了position: absolute属性，这将使body元素从页面的左上角开始位置。然后，大家设置了一个0到0的边界，这样页面就可以占据整个浏览器视口。

大家还为body元素添加了overflow-y: auto属性。这将为页面的竖直方向添加一个滚动条。当页面的内容超出浏览器的视口时，用户可以滚动滚动条浏览页面的其他部分。

最后，大家添加了一个内容div元素，它的高度是2000像素。这将产生一个长页面，使大家可以测试页面滚动和固定内容的功能。大家为该元素设置了100%的宽度和一些背景色的样式。

在实现这个技术之后，大家可以观察到页面的内容固定在视口的顶部，并且页面会添加一个竖直滚动条。当大家拖动滚动条时，页面的内容也会随之移动。这样用户可以方便地在长页面中浏览内容。