Question

我的页面上有一个元素，它是一个固定容器的子元素，也有overflow:hidden。

我想要做的是让孩子水平滚动。我试过什么似乎什么都没有用，这是我的代码。

<div class="container service-overview">
            <h1 class="section-header">Our Services<span>Whatever your needs, we have the experts on hand.</span></h1>
            <hr class="dashed" />
            <div class="scrollArea">
                <div class="quad">
                    <h3>Personal Injury</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed"/>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(152); ?>" class="user-button">More</a>
                    </div>
                </div>
                <div class="quad">
                    <h3>Employment</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed"/>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(154); ?>" class="user-button">More</a>
                    </div>
                </div>
                <div class="quad">
                    <h3>Wills &amp; Probate</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(158); ?>" class="user-button">More</a>
                    </div>
                </div>
                <div class="quad">
                    <h3>Company Law</h3>
                    <img src="<?php echo get_bloginfo('template_url'); ?>/_/img/services-thumb.jpg" />
                    <hr class="dashed" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit</p>
                    <div class="more">
                        <a href="<?php echo get_permalink(156); ?>" class="user-button">More</a>
                    </div>
                </div>
            </div>
        </div>

CSS

    .container, .wrapper, .condense {
width: 100%;
overflow: hidden;
}

.service-overview {
font-size: 15px;
font-size: .9375rem;
line-height: 133%;
padding: 0 0 124px;
}

service-overview .quad {
display: inline-block;
width: 50%;
position: relative;
border-bottom: 0 none;
float: left;
}

我哪里错了？

Answer 1

你可以在元素上尝试固定的高度。每当文本量不符合参数（高度方面）时，元素应自动增长滚动条。看到这个链接。我想它可以回答你的问题。

http://www.quackit.com/html/codes/html_scroll_box.cfm

Answer 2

如果我找到了你，你正试图滚动（使用鼠标滚轮），并且想要水平移动可滚动区域。

使用鼠标滚轮所指的垂直滚动无法进行水平滚动。你必须编写一些js来拦截滚动（jquery scroll /）然后你需要根据滚动动作滚动到水平位置（jquery scrollLeft）

这是我发现的一个例子=＆gt; http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Answer 3

我在这里引用：

答案是：你做不到。父进程有溢出：隐藏然后所有子元素将被剪裁，或者你有溢出：除了隐藏之外。

这里有几个选项：

1）删除overflow:hidden为什么首先需要这个？
2）从容器div.scrollArea中取出div.container service-overview并使其成为容器的兄弟，如下面的伪代码：

<parent>    
   <original-container style="overflow:hidden">
      <elements to be clipped>
   </container>

   <scrollarea style="overflow:visible">
      <elements to be shown>
   </container>
</parent>

除此之外，我恐怕没有办法解决这个问题。

参考：Overriding overflow: hidden

当滚动的父级溢出时水平滚动：隐藏

3 个答案: