4

私は一日中検索しましたが、やりたいことの解決策を見つけることができませんでした. このタイトルには非常に多くの質問があることは知っていますが、どれもうまくいきませんでした.

私がやろうとしているのは、モバイル用のタッチスクロールです。

これが私のhtmlです：

    <body>
    <div id="slider_container"> 
         <div class="wrapper">
             <span>Image</span>
         </div>
    </div>
    </body>

画像を含む最小 2 スパンと、画像を含む最大 10 スパンがあります。ユーザーがアップロードした写真に応じて、いくつかのphpコードとスパン番号が変更されます。

ここに私のcssコードがあります:

body
{
      width:100%;
      overflow-x:hidden;
}

#slider_container
{
width:100%;
height:320px;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

.wrapper
{
position:absolute;
height:320px;
}

.wrapper img
{
max-width:310px;
max-height:310px;
margin-right:5px;
float:left;
}

私が欲しいのは、.wrapper に自動幅を与え、#slider_container と body の外側にオーバーフローさせることです。

はっきり言っていただければ幸いです。

すべての答えをありがとう...

4

1 に答える 1

1

JavaScript を使用してコンテンツを測定し、それに応じてラッパーの幅を設定する必要があります。このようなもの：

var spans = document.querySelectorAll('.wrapper span');
var width = 0;
for(var i=0; i<spans.length; i++) {
    width += spans[i].offsetWidth + 5; // + 5 for the margins
}
document.querySelector('.wrapper').style.width = width + 'px';

複数のスライダーの代替コード:

var wrappers = document.querySelectorAll('.wrapper');
var width;
for(var i=0; i<wrappers.length; i++) {
    var spans = wrappers[i].querySelectorAll('span');
    width = 0;
    for(var j=0; j<spans.length; j++) {
        width += spans[j].offsetWidth + 5; // + 5 for the margins
    }
    wrappers[i].style.width = width + 'px';
}

http://jsfiddle.net/s4RxE/1

于 2013-10-09T14:38:14.213 に答える