當父卷軸溢出時水平滾動：隱藏

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

當父卷軸溢出時水平滾動：隱藏

回答

相關問題