纯css+div隐藏滚动条的实现方法(代码示例)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于纯css+div隐藏滚动条的实现方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

当我们的内容超出了我们的div,往往会出现滚动条,影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。

方法

这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。

而内容div设置 overflow-y: scroll;overflow-x: hidden;

然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。

效果

内层div效果:

2401059400-5bee317c3b66f_articlex.png

套上外层div效果后:

3656511600-5bee319067217_articlex.png

代码

css代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

.nav_wrap{

    height: 400px;

    width: 200px;

    overflow: hidden;

    border: 1px solid #ccc;

    margin: 20px auto;

}

.nav_ul{

    height: 100%;

    width: 220px;

    overflow-y: auto;

    overflow-x: hidden;

}

.nav_li{

    border: 1px solid #ccc;

    margin: -1px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    font-size: 12px;

    width: 200px;

}

.btn_wrap{

    text-align: center;

}

html代码:

1

2

3

4

5

6

    <div class= "nav_wrap">

    <ul class= "nav_ul">       

        <li class="nav_li">我是菜单1</li>

        <li class="nav_li">我是菜单2</li>

    </ul>

</div>

之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。 也是让滚动条被遮住了。
今天又顺手把目前在做的项目中的导航菜单的滚动条去掉了。 简单总结下来

以上就是纯css+div隐藏滚动条的实现方法(代码示例)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html什么时候出的

Html如何设置禁止选中

css怎么实现表格样式

css 实现三栏自适应布局

Html img标签的属性是有哪些?了解img标签的用法

在css中不属于添加在当前页面的形式是什么

css selector什么意思

css如何让图片自适应屏幕大小

css怎么让元素超出父元素

Html下划线颜色怎么改

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...