【问题标题】:Hiding scrollbar in div在div中隐藏滚动条
【发布时间】:2015-03-16 12:40:55
【问题描述】:

你好初露头角的网络爱好者。恐怕我陷入了困境,需要帮助。 在当前的一个 Web 项目中,我遇到了一面酸墙。这是代码。看一眼。从代码来看,它正是我想要的。 但这就是问题所在。 div 上有滚动条。我不希望我的 div 上有任何滚动条。我试过溢出-y:滚动;并摆脱了水平滚动条,但垂直滚动条仍然存在。我尝试了很多并搜索了它,但无济于事。 我怎样才能去掉我的 div 中的垂直和水平滚动条,它仍然可以滚动。

edit:我还需要它具有跨浏览器功能。不仅是铬。

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;
}

【问题讨论】:

  • 快速提问...为什么要去掉滚动条?
  • 我正在制作一个网站,其中网站的两侧(左侧 50% div 和右侧 50% div)单独滚动。因此,网站中间的滚动条看起来很丑陋,并且与网站不协调。

标签: html css layout scroll overflow


【解决方案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/

【讨论】:

  • 我同意你的看法。溢出:隐藏删除滚动条
  • jsfiddle.net/2h4mw9du 我似乎无法处理我的文件。这是一个小提琴。红色部分需要在没有滚动条的情况下滚动。
【解决方案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;
}

工作小提琴链接:No scrollbars scroll

【讨论】:

    猜你喜欢
    • 2014-11-17
    • 2017-05-29
    • 2021-01-27
    • 2012-03-18
    • 2013-11-04
    • 2011-10-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多