0

所以...我正在使用此处找到的 Smooth Div Scroll 插件... http://www.smoothdivscroll.com/

这是简单的实现...所以我使用触摸示例唯一的区别是...我使用 Divs 而不是图像...滚动。

<div id="makeMeScrollable">
  <div class='item'>One</div>
  <div class='item'>Two</div>
  <div class='item'>Three</div>
  <div class='item'>Four</div>
  <div class='item'>Five</div>
  <div class='item'>Six</div>
  <div class='item'>Seven</div>
  <div class='item'>Eight</div>
  <div class='item'>Nine</div>
  <div class='item'>Ten</div>
</div>

我的js在这里

$(document).ready(function() {
  $("#makeMeScrollable").smoothDivScroll({
    hotSpotScrolling : false,
    touchScrolling : true,
    manualContinuousScrolling : false,
    mousewheelScrolling : false
});

CSS

.item {
  height: 35px;
  width: 245px;
}

#makeMeScrollable {
  width: 100%;
  position: relative;
  border: solid 1px black;
  margin: 43% 0% 0% 0%;
}

#makeMeScrollable div.scrollableArea div {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border: black solid 1px;
  color: white;
  background-color: #1E90FF;
  text-align: center;
}

问题是，当我这样做时……我前九个 div……一个接一个……最多大约 6 个，我可以单击并滚动查看其余部分。最多 9 ......问题是 Div 10 出于某种原因环绕并位于 Div 1 下方。

我认为这样做的原因是因为通过调用可滚动函数放置在我的 10 个 div 周围的 scollableArea 包装器 div 太短了几个像素。它设置为自动，所以它应该（我假设）自动将自己设置为足够大......

我想我可以破解它并动态扩展它几个像素，这会很好......因为我尝试在 chrome 开发人员中增加它的像素......

所以是的......我发布截图......但我不能......因为我是新人哈哈

4

1 回答 1

0

如果从 CSS 中删除边框，会发生什么情况吗？

#makeMeScrollable div.scrollableArea div {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border: none;
  color: white;
  background-color: #1E90FF;
  text-align: center;
}

是否可以给 div 一个固定的宽度？就像是：

#makeMeScrollable div.scrollableArea div {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border: black solid 1px;
  color: white;
  background-color: #1E90FF;
  text-align: center;
  width: 300px;
}
于 2013-02-18T07:32:38.783 回答