外部大盒子设置overflow-y: auto;内部盒子设置定位后,不能滚动
时间: 2023-12-10 21:39:09 浏览: 33
这种情况通常是由于内部盒子的定位导致了外部盒子的滚动失效。解决方法有两种:
1. 使用 `position: sticky` 替代 `position: absolute` 或 `position: fixed`。这样可以让内部盒子在滚动时保持在固定位置,并且不会影响外部盒子的滚动。
例如:
```css
.outer-box {
height: 200px;
overflow-y: auto;
}
.inner-box {
position: sticky;
top: 0;
}
```
2. 在外部盒子上添加 `position: relative`。这样可以将内部盒子相对于外部盒子进行定位,而不是相对于整个文档进行定位,从而不会影响外部盒子的滚动。
例如:
```css
.outer-box {
position: relative;
height: 200px;
overflow-y: auto;
}
.inner-box {
position: absolute;
top: 0;
}
```
无论使用哪种方式,都需要根据实际情况进行选择。
相关问题
设置overflow-y: auto;不能滑动
如果设置 `overflow-y: auto;` 不能滑动,可能有以下原因:
1. 没有设置高度或最大高度。需要给容器设置高度或最大高度,才能使滚动条出现。
2. 容器内的内容不足以撑起容器高度。如果容器内的内容不足以撑起容器高度,则滚动条不会出现。
3. 子元素设置了 `position: fixed;`。如果子元素设置了 `position: fixed;`,则会脱离文档流,无法撑起容器高度,从而导致滚动条不出现。
4. 浏览器或父级容器设置了 `overflow: hidden;`。如果浏览器或父级容器设置了 `overflow: hidden;`,则子元素的滚动条也会被隐藏。
你可以检查一下以上几点,看看是否有问题。
vue设置overflow-y: auto;keepAlive滚动条位置不正确
可以尝试在keepAlive组件中添加一个ref属性,并在mounted生命周期中获取该组件的scrollTop属性,然后在activated生命周期中将scrollTop属性设置回去,以保持滚动条位置正确。具体代码如下:
<template>
<keep-alive ref="keepAlive">
<router-view></router-view>
</keep-alive>
</template>
<script>
export default {
mounted() {
this.scrollTop = this.$refs.keepAlive.$el.scrollTop;
},
activated() {
this.$refs.keepAlive.$el.scrollTop = this.scrollTop;
}
}
</script>