小米项目中的问题

it2022-05-06  0

滚动条隐藏:在小米官网中使用的jquery方法不太理解,所以在这里用另一种方法来实现一下滚动条的隐藏效果。

1.  把body的横向,纵向的超出部分隐藏,宽设置100%;高设置100%。就没有body的滚动条了,

2.  然后把最外层的div的宽设置的比body的宽宽一点,把div的滚动条挤出去,并把div的横向超出部分隐藏掉,就可以实现没有滚动条也可以滚动的效果。

<html> <style> *{ margin: 0; padding: 0; } .scroll{ overflow-x: hidden;overflow-y: hidden; } .scroll-son{ overflow-x: hidden; } </style> <body style="height:100%; width: 100%;" class="scroll"> <div style="height:101%; width:102%;; background: #ccc; margin: 0 auto;" class="scroll-son"> <div style="background: white;" > <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div> <div> <p>2</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>2</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div> </div> </body> </html>

 

转载于:https://www.cnblogs.com/LQK157/p/10952548.html


最新回复(0)