CSS 秘籍：让 div 垂直滚动且隐藏滚动条的实现与注意事项

以下是使用 CSS 实现 `div` 开启垂直滚动且隐藏滚动条的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .scrollable-div { height: 200px; /* 设置固定高度以显示滚动效果 */ overflow-y: scroll; /* 开启垂直滚动 */ /* 隐藏滚动条 */ -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; /* Firefox */ } .scrollable-div::-webkit-scrollbar { display: none; /* Chrome, Safari 和 Opera */ } </style> </head> <body> <div class="scrollable-div">  <p>这是一些内容</p> <p>这是更多的内容</p> <p>还有很多内容</p> </div> </body> </html> ``` ```css /* height: 200px; 设定了 div 的固定高度，以便在内容超出时出现滚动条 */ /* overflow-y: scroll; 明确开启垂直滚动 */ /* -ms-overflow-style: none; 针对 IE 和 Edge 隐藏滚动条 */ /* scrollbar-width: none; 针对 Firefox 隐藏滚动条 */ /*.scrollable-div::-webkit-scrollbar { display: none; } 针对 Chrome, Safari 和 Opera 隐藏滚动条 */ ``` 额外需要注意的逻辑点： 1. 确保内容的长度足够超出设定的高度，以验证滚动效果。 2. 不同浏览器对滚动条隐藏的支持可能略有差异，需要进行充分测试。 3. 如果后续对内容进行动态修改，可能需要重新考虑滚动条的显示和隐藏策略。 ######[AI写代码神器 | 418点数解答 | 2025-01-14 15:04:06]

服务商

更多选项

快捷项

自定义