我可以翻译成中文。问题是：我能创建一个不会显示滚动条的元素吗？

Question

我可以翻译成中文。问题是：我能创建一个不会显示滚动条的元素吗？

javascripthtmlgoogle-chromecss

3

我们有一些浮动面板可能只是部分显示在屏幕内。当窗口/主体决定是否需要显示滚动条时，能否忽略它？

当其他元素超出窗口时，我们确实需要滚动条，但这个面板不需要。因此，在主体上使用overflow:hidden将无效。

- Tom Fishman

1

在面板的包装器上使用overflow:hidden，而不是在body上使用。 - PSL

是的，按照@PSCoder的建议，将这些面板放在一个包装器中，并且让该包装器位于其他元素的下方，同时设置宽度和高度为100%。 - i--

3个回答

1

如果我理解正确，你只需要这样说：如果你想控制元素溢出的访问方式，请尝试以下内容：

- cereallarceny

1

position: fixed 的元素相对于视口定位，不会影响滚动。

- user149341

它们也不随页面滚动。 - i--

没错。但对于一个旨在成为“浮动面板”的对象来说，这可能不是问题。 - user149341

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PSL · Accepted Answer

我已经放了一个示例来展示行为。不过我对你的布局一无所知。

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