如何使水平条隐藏并使左右按钮水平滚动？答案

【问题标题】：How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?如何使水平条隐藏并使左右按钮水平滚动？
【发布时间】：2015-12-05 16:30:27
【问题描述】：

如何使水平条隐藏并让左右按钮水平滚动？

还应为手机启用滚动（启用触摸）。我创建了我正在处理的标记的jsfiddle 。非常感谢。

<div class="ui grid container r-feat-prod-row">
<div class="row">
  <!--featured column starts-->
  <div class="left floaded fourteen wide column">
    <div class="ui container">
      <div class="ui segment r-feat-col">
        <h4 class="ui horizontal divider header">Featured Category</h4>
        <!--featured products starts-->
        <div class="scroll">
          <div class="r-content">

            <div class="r-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="rfeat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="i-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="i-feat-header-price inverted">MVR 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="i-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="i-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="rfeat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
              </div>
            </div>
            <div class="rprod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
              </div>
            </div>
            <div class="r-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
              </div>
            </div>
            <div class="r-prod-card">
              <div class="blurring dimmable image ">
                <div class="ui dimmer">
                  <div class="content">
                    <div class="r-feat-header">
                      <div class="ui inverted">Product long title second line Product long title Product...</div>
                      <div class="ui divider"></div>
                      <div class="meta">
                        <span class="r-feat-header-price inverted">USD 100,000.00</span>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--featured products ends-->
    </div>
  </div>
  <!-- right side 300x250 ad column starts-->
  <div class="one wide column">
    <div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
     It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">

    </div>
  </div>
  <!-- right side 300x250 ad column ends-->
  <!--featured column ends-->
</div>

【问题讨论】：

什么单杠？滚动条？
左右键在哪里？
@divy3993 目前没有左右按钮，我也需要帮助添加左右按钮。
@hopkins-matt 是的水平滚动条
你检查menucool.com/horizontal/javascript-menu了吗？还是hugogiraudel.com/2013/08/23/scroll-overflow-menu？

标签： javascript jquery html css

【解决方案1】：

由于并非所有浏览器都允许您设置滚动条的样式，因此我在父级上使用了overflow-y:hidden; 来隐藏滚动条。您可以根据需要设置按钮样式。我只是把它们放在底部。

演示：http://jsfiddle.net/hopkins_matt/muL9mrL1/1/

CSS：

/* featured column */

.ui.segment.i-feat-col {
    overflow-y:hidden;
}

.i-feat-prod-row {
    margin-top: 30px !important;
}
h4.ui.horizontal.divider.header {
    color: #6CAF2B;
}
.i-feat-col {
    height: 250px !important;
}
.i-prod-card {
    width: 170px;
    height: 170px;
    position: relative;
    display: inline-block;
    background: #ffffff;
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
    margin: 0.5rem 1em;
    margin-top: auto;
    padding: 1em 1em;
    border-radius: 4px;
    border: 1px solid rgba(34, 36, 38, 0.15);
    top: 6px;
}
div.scroll {
    height: calc(100% + 10px);
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling-x: touch;
}
div.scroll:hover {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.i-content {
    white-space: nowrap;
}
.i-feat-header {
    text-transform: capitalize;
    font-size: 12px;
    white-space: initial !important;
    text-align: left;
    line-height: 17px;
    letter-spacing: normal;
    padding-right: 11px;
    padding-left: 11px;
    clear: right;
}
.i-feat-header-price {
    color: #F44336;
    font-weight: 500;
    font-size: 15px;
}
.i-feat-img {
    display: block;
    max-width: 140px;
    width: auto;
    height: auto;
}
.dimmable {
    position: absolute;
}

JS：

$(function () {
    $('.i-prod-card .image').dimmer({
        on: 'hover'
    });
});

function scrollHoz(dir) {
    if (dir == 'L') {
        $('.scroll').animate({
            scrollLeft: "-=" + 250 + "px"
        });
    } else if (dir == 'R') {
        $('.scroll').animate({
            scrollLeft: "+=" + 250 + "px"
        });
    }
}

HTML：

<div class="ui grid container i-feat-prod-row">
    <div class="row">
        <!--featured column starts-->
        <div class="left floaded fourteen wide column">
            <div class="ui container">
                <div class="ui segment i-feat-col">
                     <h4 class="ui horizontal divider header">Featured Category</h4>

                    <!--featured products starts-->
                    <div class="scroll">
                        <div class="i-content">
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                            <div class="i-prod-card">
                                <div class="blurring dimmable image ">
                                    <div class="ui dimmer">
                                        <div class="content">
                                            <div class="i-feat-header">
                                                <div class="ui inverted">Product long title second line Product long title Product...</div>
                                                <div class="ui divider"></div>
                                                <div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--featured products ends-->
            </div>
        </div>
        <!-- right side 300x250 ad column starts-->
        <div class="one wide column">
            <div class="ui medium rectangle test ad i-ad-300" data-text="Advertising seems to be blocked by your browser.
         It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
                <iframe class="i-frame-ad" src="http://admanager.ibay.com.mv/show.php?z=57" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
            </div>
        </div>
        <!-- right side 300x250 ad column ends-->
        <!--featured column ends-->
    </div>
</div>
<button onclick="scrollHoz('L')">Left</button>
<button onclick="scrollHoz('R')">Right</button>

【讨论】：