0

我有两个部门标签，一个用于维护溢出内容，另一个包含复选框，当我单击任何复选框时，我只需要根据复选框向上滚动条，即有 20 个复选框，如果需要，可以看到 9-10其他然后你必须滚动滚动条，但我想要功能，比如当我点击 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 回答