0

だから...私はここにあるSmooth Div Scrollプラグインを使用しています... http://www.smoothdivscroll.com/

それは簡単な実装です...だから私はタッチの例を使用しています唯一の違いは...私は画像の代わりにDivを使用しています...スクロールします。

<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;
}

問題は、それを行うと...最初の9つのdivが次々に...最大約6つになり、クリックしてスクロールして残りを表示できることです。9まで...問題は、Div 10が何らかの理由でラップアラウンドし、Div 1の下にあることです.

この理由は、スクロール可能な関数を呼び出して 10 個の div の周りに配置される scollableArea ラッパー div が数ピクセル短すぎるためです。それは自動に設定されているので、（私が推測する）自動的に自分自身を十分に大きく設定するはずです...

私はそれをハックして数ピクセル動的に拡張できると思います.それはうまくいくでしょう...クロム開発者でピクセルを増やしてみたからです...

そうそう...私はスクリーンショットを投稿します...しかし私はできません...私は新しいので笑

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 に答える