Question

我有两个分区标记1用于维护溢出内容，另一个包含复选框当我点击任何复选框时，我只需要根据复选框滚动条即有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>

当用户从列表中选中复选框时如何滚动滚动条如果用户选择向前而不是向下滚动或用户选择向后而不是按用户要求向上滚动

请帮帮我提前谢谢......

Answer 1

我想我做了你想做的事。你需要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>

请参阅this

使用javascript从div中选择复选框时自动滚动

1 个答案: