隐藏滚动条且分析其中的坑

it2023-10-16  69

通过自己的学习掌握隐藏滚动条的方式只有一种,即给滚动元素增加padding那么滚动条会以含padding的区域滚动,那么再在外层嵌套一层元素使用overflow:hidden;即可以隐藏滚动条内容。

但是有一个问题,滚动的时候需要处理padding突出一块的问题,即需要在内层元素添加一个padding-right使得希望见到的元素块可以都展示出来。

老规矩上代码:

<!DOCTYPE html> <html> <head> <style> .hidden { width: 100px; height: 100px; overflow: hidden; } .box { position: relative; padding: 100px; width: 100px; height: 100px; background: gray; box-sizing: content-box; overflow: scroll; left: -100px; top: -100px; } .child { width: 200px; height: 100px; padding-right: 100px; background-color: aqua; margin-right: 100px; } .child1 { width: 100%; height: 100%; background: blue; } </style> <meta charset="utf-8" /> </head> <body> <div class="hidden"> <div class="box"> <div class="child"> <div class="child1">你看我在动,我在动,我在动,我在动</div> </div> </div> </div> </body> </html>

 

最新回复(0)