10

divサイズの幅は固定されています。これをxと表記します

divサイズの高さが固定されています。

divのいずれかの側にボタンを追加して、ユーザーが右にナビゲートできるようにします。つまり、xピクセルを右に移動します。つまり、divの次のエントリを表示します。

誰かがこの問題の解決策を提案できますか？

これが私の現在のhtml/cssです：

<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
    <div class="inner_container" style="width: 10000px;">

<table>
    <tr>
        <td style=" width: 577px; ">
            <div style="text-align:left;  margin: 0px 10px 10px 10px; width:557px; ">
                <p>Add Comment to the Tesco Catalogue</p>
                <form class="comment_form" action="profile" method="post">
                    <textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        </td>
        <!-- do a for loop here to generate all other items -->
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
        <td style="width:577px;">
            <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
                <p class="comment_username"> User said at such a time</p>
                <p class="comment_comment"> Comment ......</p>
            </div>
        </td>
    </tr>
</table>
</div>
</div>

これがjsfiddleです

したがって、divのいずれかの側に2つのボタンを追加します。どちらも、xピクセル、左または右、明らかに左ボタン左、たとえば前のコメント、右ボタン右、次のコメントを移動します。

したがって、私が作成したhtmlでは、ユーザーのクリックに応じて、スクロールバーを一度に左または右に577px移動させたいと思います。

みんなどう思うか教えて！

4

2 に答える 2

21

を使用scrollLeft()して、現在のスクロール位置を取得できます。次に、jQueryのanimate関数を使用して、コンテナーを左右にスムーズにスクロールします。このために、左/右のIDを持つ2つのボタンを追加しました。関数間の唯一の違いは、一方が200の距離を加算し、もう一方が200を減算することです。必要なスクロール量を200に置き換えます。ボーナスポイントについては、divコンテナーに対する次のコメントセクションの左側の位置を検出し、その場で200の値を計算できます。

http://jsfiddle.net/EB4UC/70/

$('#left').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos);    
    $("div.outer_container").animate({
        scrollLeft: leftPos - 200
    }, 800);
});

$('#right').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos); 
    $("div.outer_container").animate({
        scrollLeft: leftPos + 200
    }, 800);
});
于 2013-01-24T03:22:54.350 に答える
2

何方をお探しですか 、

$('.outer_container').scrollLeft(3);
$('.outer_container').scrollTop(16);

したがって、ボタンを追加すると、コードは次のようになります。

$('#buttonid').click(function(){
$('.outer_container').scrollLeft(5);
})

ユーザーが何度もクリックして何が起こるかを確認する

$('#button_id').click(function(){
    var scroll = $('.outer_container').scrollLeft();
    console.log(scroll);
$('.outer_container').scrollLeft(5+scroll);
})
于 2013-01-24T03:20:26.067 に答える