0

我的页面上有一个元素，它是一个固定容器的子元素，该容器也有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;
}

我哪里错了？

4

3 回答 3

0

如果我说得对，您正在尝试滚动（使用鼠标滚轮）并且您想要水平移动可滚动区域。

水平滚动不能用鼠标滚轮所指的垂直滚动来完成。您必须编写一些js来拦截滚动（jquery scroll/）然后您需要根据滚动动作滚动到水平位置（jquery scrollLeft）

这是我找到的一个例子=> http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

于 2013-04-23T13:38:02.420 回答
0

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

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

于 2013-04-23T13:35:42.947 回答
0

让我在这里引用：

答案是：你不能。要么父母有溢出：隐藏然后所有子元素都将被剪裁，或者你有溢出：其他隐藏。

你有几个选择：

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>

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

参考：覆盖溢出：隐藏

于 2013-04-23T21:30:13.807 回答