小米项目中的问题

最新推荐文章于 2025-08-10 19:50:19 发布

weixin_30569001

最新推荐文章于 2025-08-10 19:50:19 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LQK157/p/10952548.html

博客介绍了一种实现滚动条隐藏效果的方法。先将body的横向、纵向超出部分隐藏，宽和高设为100%以去掉body滚动条；再把最外层div的宽设得比body宽一点，挤出div滚动条并隐藏其横向超出部分，实现无滚动条也能滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动条隐藏：在小米官网中使用的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