javascript - 卡住 jQuery 列表上的滚动，同时调整列表顶部的列表元素的大小

Question

在this fiddle我已经实现了一个带有点击处理程序的列表。单击列表中的元素时，将向其添加“.selected”类，从而更改其高度。当随后单击不同的列表元素时，“.selected”类将从先前单击的元素中删除(从而将其恢复到其原始高度)，并将“.selected”类添加到新单击的元素以改变其高度。

通知在fiddle当单击列表元素并且列表中“.selected”元素位于其下方时，单击的元素在扩展时保持完美静止并且先前选择的元素收缩。但是，当单击列表元素并且列表中“.selected”元素位于其上方时，列表会向上滚动以补偿导致新“.selected”列表元素向上移动一点的收缩元素。我想要一些机制来平稳地减轻这种行为，以便“.selected”列表元素在这种情况下保持完美。

HTML:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
</ul>

js:

$(document).ready(function () {
    $("li").click(function () {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    });
});

CSS:

li{
    width:100%;
    border-top:solid black 1px;
    height:100px;
    background:green;
}

.selected{
    height:300px;
    background:red;
}

Answer 1

如我所见，您需要偏移滚动，以便新选择的元素保留在 View 中。我建议使用以下代码:

$(document).ready(function () {
    $("li").click(function(){

        var $this = $(this),
            pos = $this.offset().top,
            $doc = $(document);

        $(".selected").removeClass("selected");
        $this.addClass("selected");

        $doc.scrollTop($doc.scrollTop() + $this.offset().top - pos);
        console.log($this.offset().top - pos);
    });
});

DEMO