Question

这是我的HTML：

<div class="photo-thumbnails">
    <div class="horizontal-scroll">
      {{#each photos}}
        <div class="inline">
          <a class="photo-link-{{../_id}}" href="{{src_big}}" data-imagelightbox="b" id="#imagelightbox">
            <img class="img-thumbnail {{../_id}}" src="{{src}}">
          </a> 
        </div>    
      {{/each}}
    </div>
  </div>

这是CSS：

.photo-thumbnails {
}

.horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
}

.inline {
  display: inline-block;
}

如何在能够滚动的同时隐藏水平滚动条？

Answer 1

你需要创建一个不如内部div高的外部div。

.inner {
    position: absolute;
    width: 300px;
    overflow: scroll;
}

.inner p {
    width: 1000px;
}

.outer {
    display: block;
    position: relative;
    width: 300px;
    height: 110px;
    overflow: hidden;
}

Here is an jsfiddle example

可滚动时隐藏水平滚动条

1 个答案: