Question

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

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中的溢出分隔只是最近的约定，之前没有办法单独禁用滚动条。但是你有几个选择：

隐藏使用其他图层的滚动条，您必须猜测每个操作系统的尺寸。
使用外部包装父级overflow: hidden或clip:rect()将剪辑栏剪辑出来。再次猜测尺寸，不理想。

根据事物的外观，你实际上并不需要任何滚动条，所以你还有一些选择：

~~使用overflow: hidden。~~
<iframe />使用scrolling="no"。

溢出

似乎隐藏溢出实际上阻止了滚动发生的事情，我的记忆必定在我的晚年失败。可能已经发誓我以前使用它，我想我更依赖JavaScript，我想。

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

含义：

[ [ 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，您可以使用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学校，他们有很棒的教程！

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

2 个答案:

溢出

内部框架

更新