是否可以在没有水平滚动条的情况下进行水平滚动。在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中缺少某些内容吗?

最佳答案

x和y中的溢出间隔只是最近的约定,之前没有办法单独禁用滚动条。但是,您有一些选择:


使用另一层隐藏任何滚动条,您都必须猜测每个OS的尺寸。
通过使用带有overflow: hiddenclip: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

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

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




更新资料

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

http://jsfiddle.net/kdRJ7/

关于html - HTML:无滚动条的水平滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20409744/

10-12 12:32
查看更多