HTML页面中有左右两个div,左边div实现滚动效果
时间: 2024-03-17 22:39:56 浏览: 106
div滚动效果
4星 · 用户满意度95%
要实现左边div的滚动效果,可以使用CSS属性overflow: scroll或overflow: auto来设置左边div的滚动条。具体实现步骤如下:
1.在HTML文件中添加两个div:
```html
<div class="left"></div>
<div class="right"></div>
```
2.在CSS文件中设置左右两个div的样式,并为左边div设置滚动条:
```css
.left {
width: 50%;
height: 500px;
overflow: scroll; /* 或者使用overflow: auto; */
}
.right {
width: 50%;
height: 500px;
}
```
3.在左边div中添加内容,超出div高度时就会出现滚动条了:
```html
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum, turpis quis suscipit lobortis, odio metus eleifend velit, eget laoreet nulla velit ac nunc. Aliquam non enim lectus. Donec euismod libero id arcu bibendum, eget bibendum ipsum varius. Sed vulputate, nibh non varius mollis, quam dolor maximus diam, non lobortis neque magna ut sem. Etiam in arcu vitae lorem convallis tristique. Etiam aliquet, sem a accumsan iaculis, neque risus tincidunt ipsum, sit amet posuere enim nulla auctor libero. Donec tempus consectetur ante, vel fringilla sapien. Curabitur eget enim nec neque ultrices eleifend sed vel tellus. Ut at elit vel tortor accumsan bibendum.</p>
... (此处省略部分内容)
</div>
<div class="right"></div>
```
这样,左边的div就会出现滚动条,右边的div则不会。
阅读全文