如何在溢出的div内水平滚动

时间:2016-01-26 15:46:49

标签: jquery html angularjs

我有一个内部有多个内联div的div,它们显示为行/列排列。我想将div设为固定宽度,但是其中的条目可能会超出其宽度,因此我想实现一个滑块以便能够水平滚动div。为了在滑块改变时水平滚动它,需要在div上调用哪些属性?我将它作为一个角度指令实现(我只想知道使div水平滚动所需的属性。)

Here is a fiddle

<div id="container">
  <div id="entries">

    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>

  </div>

  <input type="range" />

</div>

#container
{
  width:500px;
  background:#f0f0f0;
  white-space:nowrap;
  overflow:hidden;
}

.entries
{
  padding:10px;
}


.entry
{
  display:inline-block;
  width:130px;
  height:130px;
  background:chartreuse;
}

1 个答案:

答案 0 :(得分:0)

如果我理解正确......这就是你想要的......

<div class="width:400px;height:200px;overflow:auto">
   <div class="display:inline">Some Inline Div</div>
   <div class="display:inline">Some Inline Div</div>
   <div class="display:inline">Some Inline Div</div>
</div>

但如果内置的滚动条在视觉上对你不起作用,那么最好的办法是使用jQuery插件来增加滑块。