隐藏浏览器自带的滚动条而不影响内部元素的滚动条
时间: 2024-05-09 07:18:56 浏览: 9
可以通过以下两种方法来实现:
1.使用CSS的伪元素::-webkit-scrollbar来隐藏浏览器自带的滚动条。
```
/*隐藏滚动条*/
::-webkit-scrollbar{
display: none;
}
```
2.使用overflow属性来设置内部元素的滚动条。
```
/*设置内部元素的滚动条*/
div{
overflow-y: scroll;
}
```
这样就可以隐藏浏览器自带的滚动条而不影响内部元素的滚动条了。
相关问题
隐藏浏览器自带的滚动条
可以使用CSS的方式来隐藏浏览器自带的滚动条:
```
::-webkit-scrollbar {
display: none;
}
/* For Firefox */
scrollbar-width: none;
```
这样就可以隐藏滚动条了。但是需要注意的是,如果页面内容超出了容器的高度,用户仍然可以通过鼠标滚轮或者键盘上下键来滚动页面。
elementui中不用el-table框自带的滚动条用浏览器自己的滚动条
在 Element UI 的 el-table 中,可以通过设置 table 的 height 属性为一个固定的值或者一个百分比来控制表格的高度。当表格的内容超出了可见区域时,el-table 会自动出现纵向滚动条,这个滚动条是由浏览器自己生成的。
如果你想要使用浏览器自带的滚动条,可以将 table 的 height 设置为 auto,然后将 el-table-column 的 width 属性设置为一个固定的值,这样表格就会根据列宽度自适应高度,从而使用浏览器自带的滚动条。
示例代码如下:
```html
<el-table :data="tableData" height="auto" style="width: 100%">
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
<el-table-column prop="address" label="地址" width="200"></el-table-column>
</el-table>
```
这样配置后,el-table 会根据列宽度自适应高度,当表格内容超出可见区域时,会出现浏览器自带的纵向滚动条。