0

ページに要素があります。これは、固定された with コンテナーの子であり、 も含まれてい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

ここで引用させてください：

答えは: できません。親にoverflow:hiddenがあり、すべての子要素がクリップされるか、overflow:other-than-hiddenがあります。

ここにはいくつかのオプションがあります。

overflow:hidden1)そもそもなぜこれが必要なのかを削除します。
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 に答える