Question

我遇到了一个问题，我在类“包装器”中的div中有一个iframe。它显示了一个滚动条，即使浏览器本身有一个滚动条也适用于浏览器中的大图像。

HTML

<section id="commentContainer" class="darkbgType">
    <div id="commentPane">
        <div class="wrapper">
            <h2 class="pbxl">File Title</h2>
            <!--Disqus-->
            <div id="disqus_thread"></div>
            <script type="text/javascript">
                /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
                var disqus_shortname = 'inspectacle'; // required: replace example with your forum shortname
                var disqus_identifier = '@file.fileHash';
                /* * * DON'T EDIT BELOW THIS LINE * * */
                (function() {
                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a><!--end Disqus-->
        </div><!--end wrapper-->    
    </div><!--end commentPane-->
</section><!--end commentContainer-->

CSS

#commentContainer {
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
}

#commentPane {
    background: #181818;
    height: 100%;
    padding: 40px 24px 40px 40px;
    width: 300px;
    position: fixed;
    overflow: hidden;
}

.wrapper {
    overflow: auto;
    height: 100%;
    width: 100%;
}

Answer 1

您正在使用overflow:auto，这意味着您告诉浏览器，只要出现溢出，它就应该使用滚动条。

如果您只想将滚动限制为单个轴，请使用overflow-x或overflow-y。

[编辑]双滚动条是由于文档正文的高度超出视口大小100％所致，因为您已在分配给{{1的100％的顶部添加了附加填充}}。我建议您使用#commentPane，以使最终高度包括边框宽度（如果有）和您包含的填充。

Answer 2

如果我正确地看待它，一切似乎都在起作用。注释不能垂直放在容器中，并为它们显示滚动条。左侧的图像太大，因此滚动条位于浏览器的右侧以滚动页面。

我唯一的假设是您不希望评论中的滚动条需要overflow-y: hidden来容纳该容器。

需要帮助避免双垂直滚动条

2 个答案: