HTML：没有滚动条的水平滚动

Question

是否可以在没有水平滚动条的情况下进行水平滚动。在 Chrome 中它不是很难，因为您可以使用“overflow-y: hidden”隐藏滚动条。结帐thisjsfiddle。

HTML：

<div id="main">
    <div id="myWorkContent">
        <a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
        <a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
        ...
    </div>
</div>

CSS：

#main {
    height: 210px;
    overflow:hidden;
}
#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
#myWorkContent a {
    display: inline;
}

到目前为止，一个不错的水平滚动条没有滚动条。但是，在 IE9/IE10 中这不起作用。是否有其他解决方案可以解决此问题或我的 css 中缺少某些内容？

Answer 1

x 和 y 中的溢出分隔只是最近的约定，在此之前没有办法单独禁用滚动条。但是，您有几个选择：

1. 使用另一层隐藏任何滚动条，您必须猜测每个操作系统的尺寸。
2. 使用带有overflow: hidden 或clip:rect() 的外包装父级将滚动条剪掉。再次猜测尺寸，并不理想。

从外观上看，您实际上并不需要滚动条，因此您有更多选择：

1. 使用overflow: hidden。
2. 使用<iframe /> 和scrolling="no"。

溢出

在您的情况下，使用 `overflow: hidden` 会改变元素在水平方向上延伸的方式。为了解决这个问题，您需要计算您希望连续显示的项目的宽度总和，并将其设置为包装父项的宽度。

似乎隐藏溢出实际上可以防止滚动发生任何事情，我的记忆一定是在我年老的时候失败了。可以发誓我以前使用过它，我想我对 JavaScript 的依赖比我想象的要严重。

因此，您可以使用我提到的第一点，即使用overflow: auto，但您可以剪掉滚动条，而不是使用overflow: hidden。这仍然需要计算水平父级的尺寸：

意思：

[ [ 101px ] + [ 101px ] + [ 101px ] <-- wrapping parent would be 303px ]

但是涉及到我之前写的稍微修改一下：

CSS：

.viewport-clip {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.viewport {
  width: 100px;
  height: 130px;
  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.horizontal {
  width: 303px;
  height: 130px;
}

.item {
  width: 100px;
  float: left;
  background: blue;
  margin-right: 1px;
  height: 100px;
}

标记：

<div class="viewport-clip">
  <div class="viewport">
    <div class="horizontal">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

.viewport-clip 用于隐藏不需要的滚动条。我们给.viewport 一个额外的高度+30px，这样无论操作系统如何，水平条都会被去掉——如果操作系统有这么粗的滚动条，那就太奇怪了。这确实意味着您必须确保为可滚动内容提供精确的高度，不能依赖任何高度百分比或任何东西。

和以前一样，您仍然使用.viewport 元素来限制可视区域，并且仍然可以使用 JavaScript 滚动：

document.getElementById('viewport').scrollLeft = <pixel value here>

用户肯定能够使用他们拥有的任何人机界面设备，例如鼠标滚轮、触摸设备；因为该区域只是一个普通的可滚动 div。但是，您应该始终提供一些 UI 来滚动，以防万一用户没有此选项。

iframe

另一种方法是使用 iframe，您可以在其中使用 scrolling="no" 禁用栏。这样做的好处是不需要知道内容的尺寸，但代价是必须处理 iframe。

<iframe src="contents-to-be-scrolled.html" scrolling="no" />

更新

我最近的修改可以在这个小提琴中找到。

http://jsfiddle.net/kdRJ7/

Answer 2

通过制作#myworkcontent div，您可以降低溢出，然后您的#main div 将覆盖该溢出。然后，你可以只用一个巧妙的相对定位和相同颜色的div来覆盖#myworkcontent的白色。您可能还需要扩展#myworkcontent 的大小，以便#main 可以容纳在其中，但overflow-y: hidden; 属性将防止事情变得混乱。这是一个更新的小提琴：http://jsfiddle.net/9QYJ2/4/

我只是没有添加封面 div，没有时间将其合并，但我相信您熟悉绝对定位和相对定位，如果不查看 W3 学校，他们有很棒的教程！