当父卷轴溢出时水平滚动：隐藏

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

我要去哪里错了？

来源

2013-04-23 Udders

请小提琴 – user2255273 2013-04-23 13:35:45

您可能需要更改'溢出：隐藏;''到溢出：滚动;'如果你是想左右滚动。你也有'overflow-x：'或'overflow-y：' – Andrew 2013-04-23 13:37:38

http://jsfiddle.net/PvkSZ/ – Udders 2013-04-23 13:39:34

您可以尝试元素的固定高度。只要文本数量不符合参数（高度明智），元素应自动增加滚动条。看到这个链接。我想这可能会回答你的问题。

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

来源

2013-04-23 13:35:42

高度无关紧要 - 我想要水平滚动条不垂直 – Udders 2013-04-23 13:40:05

如果我得到你的权利，你要滚动（使用鼠标滚轮），并要水平移动的滚动区域。

水平滚动不能通过鼠标滚轮引用的垂直滚动来完成。你将不得不写一些JS拦截滚动（jQuery的滚动/），然后你需要根据滚动操作（jQuery的scrollLeft）

这里滚动到水平位置是一个例子，我发现=>http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

来源

2013-04-23 13:38:02 Jeredepp

让我在这里引用：

答案是：你不能。无论父母是否有溢出：隐藏然后所有的子元素将被剪切，或者你有溢出：不是隐藏。

你有几个选择这里：

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

来源

2013-04-23 21:30:13

当父卷轴溢出时水平滚动：隐藏

回答

相关问题