我可以创建一个不会打开滚动条的元素吗?

时间:2013-04-16 01:49:53

标签: javascript css html5 google-chrome css3

我们的浮动面板可能部分在屏幕上。当窗口/正文决定滚动条是否需要显示时,窗口/正文是否可以忽略它?

当其他元素出现在窗口之外时,我们确实需要滚动条,但不需要此面板。所以溢出:隐藏在身体上是行不通的。

3 个答案:

答案 0 :(得分:1)

如果我理解正确,你应该只能说:

body { overflow: auto; }

如果您想控制元素溢出的访问权限,请尝试以下方法:

body { overflow-x: auto; overflow-y: hidden; }

答案 1 :(得分:1)

使用position: fixed相对于视口定位的对象不会影响滚动。

答案 2 :(得分:1)

我刚刚举了一个例子来说明这种行为。我对你的布局一无所知。

HTML

<div>
    <div class="pnlContent left"><!-- put as much content as you want here it will put a scroll bar on the body as the content opverflows --> 
        <p>
        Why use Modernizr?
Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr 

makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a 

feature or not. It’s perfect for doing progressive enhancement easily.

How it works
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds 

classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes 

YepNope.js for conditional loading of external .js and .css resources.

            Check out the full list of features that Modernizr detects, or learn more about conditional resource loading 

with Modernizr.</P>
 </div>
 <div class="pnlWrapperNoOf right"> <!-- put as much content as you want here it will just be hidden --> 
        <div class="panel">
            <p>We have floating panels that may be partially in screen. Can the window/body ignore it when it decides if 

scroll bar needs to show?

                We do need scroll bar when other elements go outside of the window, but not this panel. So overflow:hidden 

on the body won't work.</p>
               <p>We have floating panels that may be partially in screen. Can the window/body ignore it when it decides if 

scroll bar needs to show?

                We do need scroll bar when other elements go outside of the window, but not this panel. So overflow:hidden 

on the body won't work.</p>
        </div>
    </div
</div>

CSS

div
{
    border:1px solid #cecece;
}
div.pnlWrapperNoOf
{
    max-height:300px;
    overflow:hidden;
}
div.left
{
    float:left;
    width:49%;
}
div.right
{
    float:right;
    width:49%;
}