在DIV隐藏滚动条(Hiding scrollbar in div)

2019-10-21 15:10发布

你好萌芽网络爱好者。 我怕,我在相当泡菜和需要帮助。 在当前的web项目,我遇到了一个酸酸的墙。 这这里是代码。 采取甘德。 从代码,它正是我想要的。 但这里的问题 。 上有DIV滚动条。 我不想在我的div的任何滚动。 我试图溢出-Y:滚动; 并且摆脱了水平滚动条的,但垂直滚动条仍然存在。 我想了很多,寻找它,但无济于事。 我怎样才能摆脱垂直和水平滚动条在我的div仍然bieng能滚动。

编辑:我也需要它是跨浏览器的功能。 不仅铬。

HTML

<div id="content">
    <div id="left">
        <div class="richyPhoto"> </div>
    </div>

    <div id="right">
    </div>
</div>

CSS

body {
    overflow:hidden;
}
#content, html, body {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

Answer 1:

我会用这种方法:

#parent{
height: 100%;
width: 100%;
overflow: hidden;
}

#child{
width: 100%;
height: 100%;
overflow: auto;
padding-right: 15px; /* Increase this value for cross-browser compatibility */
}

这里有一个工作小提琴: http://jsfiddle.net/5GCsJ/954/



Answer 2:

这里是一个办法做到这一点:HTML

<div id="content">
    <div id="left">
        <div class="richyPhoto"> </div>
    </div>

    <div id="right">
       <div class="richyPhoto2"> </div>
    </div>
</div>

CSS

body {
    overflow:hidden;
}
#content, html, body {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: hidden;
}
.richyPhoto {
    width: 100%;
    height: 99%;
    border: 1px solid red;
    overflow: auto;
    padding-right: 15px;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: hidden;
}
.richyPhoto2 {
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

工作小提琴链接: 没有滚动条滚动



文章来源: Hiding scrollbar in div