0

私は単にスクロールv1を使用して、さまざまな幅の画像を水平方向にスクロールしていますが、画像を含むリスト項目は固定幅です。

スクロールコンテンツはこちらからご覧いただけます。

さまざまな幅のリスト項目を実現するにはどうすればよいですか?

著者は次のように提案しています。

サイズの異なる要素をスクロールしたい場合は、コンテナ div に入れてから、その上で単にスクロールを初期化してみてください (このハックは、スクロールされる要素の量を本質的に 2 倍にすることに注意してください!)

リストはすでにコンテナ div 内にあるようです:

div.simply-scroll-container

コンテナ div の「初期化」とはどういう意味ですか?

私にはあいまいですが、同様のスレッドがここに存在します。どんな助けでも大歓迎です。

4

4 に答える 4

0

すでに提供されている両方の回答を組み合わせることで、これを機能させました。

  • <ul>を独自にラップする<div id="scroller">
  • CSSwidthの要素から固定プロパティを削除します.simply-scroll .simply-scroll-list li
  • padding必要に応じてこの要素に追加します。

Firefox、Chrome、IE で動作します。

于 2013-03-14T16:29:56.380 に答える
0

これは、スクロールしようとしている要素を自動的にラップすることで、バージョン 2 (まもなくリリースされます!) で修正される一般的な問題です。とりあえず手動で。

幅/高さが等しくない要素のリストがある場合

<ul id="scroller"> <li></li> <li></li> etc... </ul>

別の div にラップして、スクロールするだけです。

<div id="scroller"><ul> <li></li> <li></li> etc... </ul> </div>

于 2011-09-09T10:26:03.760 に答える
0

それがあなたに役立つかどうかはわかりません。質問が書かれてから2年以上。

li内の各画像の幅が異なる場合の解決策です

$( window ).load(function() {
  $('#scroller li img').each(function(){
      var widthThis = $(this).width();

      $(this).parent().css({
        width : widthThis
      })
   });
$("#scroller").simplyScroll({
    pauseOnHover: false
});

});

于 2014-01-23T18:42:45.307 に答える
0

li の幅は単純スクロール css ファイルで設定されているため、さまざまなサイズを使用する場合は、幅プロパティを削除するだけです。

前： .simply-scroll .simply-scroll-list li { float: left; /*width: 290px;*/ width: 290px; /*height: 200px;*/ height: 180px; }

後： .simply-scroll .simply-scroll-list li { float: left; /*height: 200px;*/ height: 180px; }

于 2011-04-11T14:55:18.767 に答える