html,父元素和子元素都允许滚动,子元素滚动时 禁止父元素滚动
时间: 2024-05-11 15:19:59 浏览: 8
可以通过JavaScript来实现。具体思路是:监听子元素的滚动事件,当子元素滚动时,通过设置父元素的`overflow`属性为`hidden`来禁止父元素滚动;当子元素滚动结束时,再将父元素的`overflow`属性设置为`auto`。
以下是一个实现示例:
HTML代码:
```html
<div id="parent">
<div id="child">
<!-- 子元素内容 -->
</div>
</div>
```
CSS代码:
```css
#parent {
height: 200px; /* 父元素高度 */
overflow: auto; /* 父元素允许滚动 */
}
#child {
height: 300px; /* 子元素高度 */
overflow: auto; /* 子元素允许滚动 */
}
```
JavaScript代码:
```javascript
var parent = document.getElementById("parent");
var child = document.getElementById("child");
child.addEventListener("scroll", function(e) {
if (child.scrollTop > 0) {
parent.style.overflow = "hidden"; /* 禁止父元素滚动 */
} else {
parent.style.overflow = "auto"; /* 允许父元素滚动 */
}
});
```
这样,当子元素滚动时,父元素就会被禁止滚动,当子元素滚动结束时,父元素又可以被滚动。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)