本文介绍了可水平滚动,无滚动条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图模仿 overflow-y:hidden overflow-x 的行为,不具有相同的行为。 overflow-x:hidden 不允许滚动(通过拖动)。

I'm trying to mimic the behavior of overflow-y:hidden to overflow-x, but it doesn't behave the same way. overflow-x:hidden doesn't allow to scroll (by dragging).

http://jsfiddle.net/Gxm2z/ =nofollow> http://jsfiddle.net/Gxm2z/

See: http://jsfiddle.net/Gxm2z/

#container {
    width:300px
}
    #modules {
    height:50px;
    padding:5px;
    white-space:nowrap;
    overflow-y:hidden;
    overflow-x:scroll;
    -webkit-overflow-scrolling:touch;
}
.module {
    display:inline-block;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#ddd;
}

如果没有滚动条,如何获得相同的结果?

How can I achieve the same result without a scroll bar? I'm ok with a javascript/jQuery plugin.

计划是使用箭头,也许是一个自定义滚动条

The plan is to use arrows, and maybe a custom scrollbar

推荐答案

这是我的解决方案基于CSS - 在所有设备上简单和漂亮,不需要额外的JS。

this is my solution CSS based - simple and nice on all devices, no need for additional JS.


  • 向父元素添加固定高度和溢出隐藏(在 #container 中)

  • c $ c> #modules - 这创建足够的地方隐藏在父元素下的滚动条(因为较小的 #container 高度,这个地方是不可见的)
  • add fixed height and overflow hidden to parent element (in your case #container)
  • enlarge height of #modules - this create enough place hidden under parent element for scrollbar (because of smaller #container height, this place is invisible)
  • using -webkit-overflow-scrolling:touch; is good choice, make nice behavior on iPad and iPhone

#container {
    width: 300px;
    height: 60px;
    overflow: hidden;
}
#modules {
    height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */
    padding: 5px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


现场演示: a href =http://jsfiddle.net/s6wcudua/ =nofollow noreferrer> http://jsfiddle.net/s6wcudua/

live demo: http://jsfiddle.net/s6wcudua/

这篇关于可水平滚动,无滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-24 07:12