javascript - 我可以创建一个不打开滚动条的元素吗？

Question

我们有可能部分在屏幕上的浮动面板。窗口/主体在决定是否需要显示滚动条时可以忽略它吗？

当其他元素超出窗口时，我们确实需要滚动条，但不是这个面板。所以溢出：隐藏在身体上是行不通的。

Answer 1

如果我理解正确，您应该只能说：

body { overflow: auto; }

如果您想控制元素溢出的访问权限，请尝试以下操作：

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

Answer 2

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

Answer 3

我刚刚举了一个例子来展示这种行为。不过，我对您的布局一无所知。

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