body 不滚动让子 div 滚动

可以通过CSS的overflow属性来设置。具体地，在父元素的样式中设置overflow为hidden，然后在子元素的样式中设置overflow为auto或scroll即可。例如： ```html <div style="height: 200px; overflow: hidden;"> <div style="height: 300px; overflow: auto;"> 这里是需要滚动的内容 </div> </div> ``` 这样，父元素不会滚动，而子元素则可以根据内容的高度自动滚动。如果内容高度超过了子元素的高度，则会出现纵向滚动条。如果不想出现滚动条，可以将overflow属性设置为hidden，这样超出部分会被隐藏。

body 不滚动让子 div 滚动具体示例代码

好的，以下是一个基本的 HTML 和 CSS 代码示例，可以让子 div 滚动而不让 body 滚动： ```html <!DOCTYPE html> <html> <head> <title>子 div 滚动示例</title> <style> body { margin: 0; padding: 0; overflow: hidden; } .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; } .content { height: 2000px; /* 设置一个大于容器高度的高度 */ } </style> </head> <body> <div class="container"> <div class="content">  </div> </div> </body> </html> ``` 这里使用了 CSS 的 `position: absolute` 属性将容器撑满整个页面，并使用 `overflow-y: scroll` 属性将容器设置为可滚动。同时将 body 的 `overflow` 属性设置为 `hidden`，这样就可以隐藏 body 的滚动条。 `content` div 的高度设置为一个比容器高度更高的值，以确保可以滚动。

当页面滚动条触发时候不让 body 滚动让子div滚动

你可以使用CSS和JavaScript来实现这个功能。首先你需要在CSS中将body的overflow属性设置为hidden，这样就可以禁止整个页面的滚动了： ```css body { overflow: hidden; } ``` 然后你需要为子div添加一个自定义的样式，比如scrollable，用来控制子div的滚动： ```css .scrollable { overflow-y: scroll; } ``` 最后，你需要使用JavaScript来切换body和子div的样式。当滚动条触发时，将body的样式设置为hidden，同时将子div的样式设置为scrollable。当滚动条消失时，将body的样式设置为auto，同时将子div的样式移除： ```javascript // 获取子div var div = document.getElementById("yourDivId"); // 监听滚动条事件 window.addEventListener("scroll", function () { // 判断滚动条状态 if (window.scrollY > 0) { // 禁止body滚动 document.body.style.overflow = "hidden"; // 启用子div滚动 div.classList.add("scrollable"); } else { // 启用body滚动 document.body.style.overflow = "auto"; // 禁止子div滚动 div.classList.remove("scrollable"); } }); ``` 注意，这段代码中的“yourDivId”是你需要替换为你的子div的id。

body 不滚动 让 子 div 滚动