0

2 つの部門タグがあり、1 つはオーバーフロー コンテンツを維持するためのもので、もう 1 つは任意のチェック ボックスをクリックしたときにチェック ボックスを含むものです。チェック ボックスに応じてバーをスクロールするだけです。それ以外の場合はスクロールバーをスクロールする必要がありますが、9つのチェックボックスをクリックしてユーザーが先に進みたい場合、10のチェックボックスが自動的に表示されるような機能が必要です。この機能は、メールを選択するためのホットメールですでに提供されています。

そのために私は以下を使用しています

<div>
<div id="text" style="width: 500px; height:200px; border: solid 1px grey; overflow: scroll;">
    <input id="check1" type="checkbox" onclick="update(this.id)">Auto-scroll1<br>
    <input id="check2" type="checkbox" onclick="update(this.id)">Auto-scroll2<br>
    <input id="check3" type="checkbox" onclick="update(this.id)">Auto-scroll3<br>
    <input id="check4" type="checkbox" onclick="update(this.id)">Auto-scroll4<br>
    <input id="check5" type="checkbox" onclick="update(this.id)">Auto-scroll5<br>
    <input id="check6" type="checkbox" onclick="update(this.id)">Auto-scroll6<br>
    <input id="check7" type="checkbox" onclick="update(this.id)">Auto-scroll7<br>
    <input id="check8" type="checkbox" onclick="update(this.id)">Auto-scroll8<br>
    <input id="check9" type="checkbox" onclick="update(this.id)">Auto-scroll9<br>
    <input id="check10" type="checkbox" onclick="update(this.id)">Auto-scroll10<br>
    <input id="check11" type="checkbox" onclick="update(this.id)">Auto-scroll11<br>
    <input id="check12" type="checkbox" onclick="update(this.id)">Auto-scroll12<br>
    <input id="check13" type="checkbox" onclick="update(this.id)">Auto-scroll13<br>
    <input id="check14" type="checkbox" onclick="update(this.id)">Auto-scroll14<br>
    <input id="check15" type="checkbox" onclick="update(this.id)">Auto-scroll15<br>
    <input id="check16" type="checkbox" onclick="update(this.id)">Auto-scroll16<br>
    <input id="check17" type="checkbox" onclick="update(this.id)">Auto-scroll17<br>
    <input id="check18" type="checkbox" onclick="update(this.id)">Auto-scroll18<br>
    <input id="check19" type="checkbox" onclick="update(this.id)">Auto-scroll19<br>
    <input id="check20" type="checkbox" onclick="update(this.id)">Auto-scroll20<br>
    <script type="text/javascript">
        function update(checkID) {
            var box = document.getElementById("checkID");
            var tag = document.getElementById("text");
            tag.scrollTop = tag.scrollTop - 17;
            setTimeout('update(checkID)', 1000);
        }
    </script>
</div>
</div>

ユーザーがリストからチェックボックスを選択したときにスクロールバーをスクロールする方法、およびユーザーがスクロールダウンするよりも前方に選択した場合、またはユーザーの要件に従ってスクロールアップするよりも後方に選択した場合

事前に感謝してください...

4

1 に答える 1

0

私はあなたが望むことをしたと思います。これには jQuery が必要です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="text" style="width:500px;height:200px;border:solid 1px grey;overflow:scroll;">
    <input type="checkbox" />Auto-scroll1<br/>
    <input type="checkbox" />Auto-scroll2<br/>
    <input type="checkbox" />Auto-scroll3<br/>
    <input type="checkbox" />Auto-scroll4<br/>
    <input type="checkbox" />Auto-scroll5<br/>
    <input type="checkbox" />Auto-scroll6<br/>
    <input type="checkbox" />Auto-scroll7<br/>
    <input type="checkbox" />Auto-scroll8<br/>
    <input type="checkbox" />Auto-scroll9<br/>
    <input type="checkbox" />Auto-scroll10<br/>
    <input type="checkbox" />Auto-scroll11<br/>
    <input type="checkbox" />Auto-scroll12<br/>
    <input type="checkbox" />Auto-scroll13<br/>
    <input type="checkbox" />Auto-scroll14<br/>
    <input type="checkbox" />Auto-scroll15<br/>
    <input type="checkbox" />Auto-scroll16<br/>
    <input type="checkbox" />Auto-scroll17<br/>
    <input type="checkbox" />Auto-scroll18<br/>
    <input type="checkbox" />Auto-scroll19<br/>
    <input type="checkbox" />Auto-scroll20<br/>
</div>

<script type="text/javascript">
$(function() {
    var ct = $('#text'),
        cboxes = $('input[type="checkbox"]', ct),
        lastChecked = null;

    cboxes.click(function() {
        if (!lastChecked)
            lastChecked = this;

        var _current = $(this),
            _last = $(lastChecked),
            cindex = cboxes.index(_current),
            lindex = cboxes.index(_last),
            t = null;

        //next
        if (cindex >= lindex) {
            t = $(cboxes[cindex + 1]);
            if (t) ct.animate({ scrollTop: ct.scrollTop() + t.height() * 1.5 }, 500);

        //prev
        } else if (cindex < lindex) {
            t = $(cboxes[cindex - 1]);
            if (t) ct.animate({ scrollTop: ct.scrollTop() - t.height() * 1.5 }, 500);
        }

        lastChecked = this;
    });
});
</script>

これを見る

于 2013-01-28T13:15:30.173 に答える