如果想遮罩层内容下的内容不滚动，需要去掉html,body的滚动条，自己设置滚动区域，设置height为100vh，遮罩层fixed定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body { overflow: hidden; margin: 0; padding: 0; } .scroll { position: relative; width: 100%; height: 100vh; overflow: auto; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-track { background: #FFF; } ::-webkit-scrollbar-track-piece{ background: #FFF; } ::-webkit-scrollbar-thumb { background: #BBB; } .mask { /* display: none; */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .content .a { height: 400px; } </style> </head> <body> <div class="scroll"> <div class="mask"></div> <div class="content"> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> </div> </div> </body> </html>
如果想遮罩层内容下的内容滚动，需要只需要设置为html，body滚动即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-track { background: #FFF; } ::-webkit-scrollbar-track-piece{ background: #FFF; } ::-webkit-scrollbar-thumb { background: #BBB; } .mask { /* display: none; */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .content .a { height: 400px; } </style> </head> <body> <div class="scroll"> <div class="mask"></div> <div class="content"> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> </div> </div> </body> </html>