Javascript 冻结jQuery列表上的滚动，同时调整列表顶部的列表元素的大小

在中，我实现了一个带有单击处理程序的列表。单击列表中的某个元素时，会将“.selected”类添加到该元素中，从而更改其高度。当随后单击不同的列表元素时，.selected类将从先前单击的元素中删除（从而将其恢复到原始高度），并且，.selected类将添加到新单击的元素中，从而改变其高度

请注意，在中，当单击列表元素且“.selected”元素位于列表中该元素的下方时，单击的元素在展开且先前选择的元素收缩时保持完全静止。但是，当单击列表元素且“.selected”元素在列表中位于其上方时，列表会向上滚动，以补偿收缩元素导致新“.selected”列表元素稍微向上移动的影响。我想要一些机制来平滑地缓解这种行为，以便“.selected”列表元素在这种情况下保持完全静止

Html:

css:

至此：

我想要一些机制来顺利缓解这种行为 “.selected”列表元素在该视图中保持完全静止 环境

我不明白你怎么能让它“完全静止”，因为当其他项目收缩时，如果列表的其余部分不知何故“固定”到位，那么项目之间就会有巨大的差距

一些想法。。。此css：

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

.selected{
    height:300px;
    background:red;
    transition: height 2s;
    -webkit-transition: height 2s;
}

使转换过程不那么刺耳，便于眼睛跟随

要想真正得到你想要的，“完全静止”，你可以做一些像这样的事情：

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

CSS

---

正如你所看到的那样，这确实阻止了下面的人“跳跃”。。。因为我认为这是一个DrPy方法，我没有花时间去检查新点击的是在上面选择的还是低于先前选择的。但这是微不足道的补充。有意义吗？

正如我看到的，您需要偏移滚动，以便新选择的元素保留在视图中。我建议使用以下代码：

$(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);
    });
});

---

为什么不简单地向

元素添加一个转换？

这样，您可以在选定/未选定状态之间获得平滑效果

li{
    width:100%;
    border-top:solid black 1px;
    height:100px;
    background:green;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

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

您可以尝试以下jQuery内容

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

     var selectItemTop = $(this).position().top;

     var windowTop = $(window).scrollTop();
     var selectItemHeight = $(".selected").height();
     var selectionTop = $('li').hasClass('selected') ? $(".selected").position().top : 0;
     console.log(selectionTop);
     if (selectionTop < selectItemTop) {
       selectItemTop = selectItemTop - windowTop;
       $(window).scrollTop(windowTop + selectItemTop - selectItemHeight);

     }


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

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


   });

$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
var selectItemTop=$（this）.position（）.top；
var windowTop=$（window.scrollTop（）；
var selectItemHeight=$（“.selected”）.height（）；
var selectionTop=$（'li'）.hasClass（'selected'）？$（.selected”）.position（）.top:0；
console.log（选择顶部）；
如果（selectionTop

我几乎满足了你的要求

您可以通过此链接测试示例
$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
var selectItemTop=$（this）.position（）.top；
var windowTop=$（window.scrollTop（）；
var selectItemHeight=$（“.selected”）.height（）；
var selectionTop=$（'li'）.hasClass（'selected'）？$（.selected”）.position（）.top:0；
console.log（选择顶部）；
如果（selectionTop
我看到你接受了我的回答，非常感谢。我不想显得不礼貌，但我能希望我也能得到奖金吗？谢谢你的回答，托尼。我想我刚刚颁发了奖金，如果没有通过，请告诉我。我很惊讶奖金不是自动接受答案的。非常感谢，现在一切都好了！
.previouslySelected {
    height:100px;
    margin-bottom:200px;
}

$(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);
    });
});

li{
    width:100%;
    border-top:solid black 1px;
    height:100px;
    background:green;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

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

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

     var selectItemTop = $(this).position().top;

     var windowTop = $(window).scrollTop();
     var selectItemHeight = $(".selected").height();
     var selectionTop = $('li').hasClass('selected') ? $(".selected").position().top : 0;
     console.log(selectionTop);
     if (selectionTop < selectItemTop) {
       selectItemTop = selectItemTop - windowTop;
       $(window).scrollTop(windowTop + selectItemTop - selectItemHeight);

     }


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

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


   });

$(document).ready(function () {
$("li").click(function(){    
    var selectItemTop = $(this).position().top;    
    var windowTop = $(window).scrollTop();
    var selectItemHeight = $(".selected").height();
    var selectionTop =  $('li').hasClass('selected') ? $(".selected").position().top : 0;
    console.log(selectionTop);    
    if(selectionTop < selectItemTop){
      selectItemTop = selectItemTop-windowTop;
            $(window).scrollTop(windowTop+selectItemTop-selectItemHeight);        
    }
    $(".selected").removeClass("selected");
    $(this).addClass("selected");    
      });

    });