jQuery问题：滚动至带动态class的元素功能失效排查

你遇到的问题核心在于滚动位置的计算逻辑错误：你用了元素相对于整个文档的偏移量（target.offset().left）来设置滚动容器的scrollLeft，但scrollLeft需要的是元素相对于滚动容器（.output）内部的偏移量。首次点击时容器还没滚动，这个值碰巧正确，但后续滚动后，文档级别的偏移量和容器内部的滚动距离就不再匹配了，导致滚动到错误的位置。

另外，你的选择器可以更精准一些，避免意外匹配到其他元素。

修正后的代码 #

JavaScript 部分 #

var output = $(".output div");
var outputContainer = $(".output"); // 提前缓存滚动容器，避免重复查询

$(".wrapper div").click(function(){
    var size = $(".wrapper div").length;
    output.css('width', size * 100 + 'vw');
    var index = $(this).index() + 1;
    
    output.empty();
    $(".wrapper div").each(function(){
        // 原元素不需要移除vp类，因为我们只给克隆体加这个类
        $(this).clone().appendTo(output);
    });
    
    // 用output.find精准定位克隆体，避免全局查询
    var target = output.find("div:nth-child(" + index + ")");
    target.addClass("vp");
    
    // 使用requestAnimationFrame确保DOM更新后再计算滚动位置，比setTimeout更可靠
    requestAnimationFrame(function(){
        // 计算元素相对于滚动容器的偏移量：元素文档偏移 - 容器文档偏移
        var scrollPosition = target.offset().left - outputContainer.offset().left;
        outputContainer.animate({ scrollLeft: scrollPosition }, 500);
    });
});

CSS 和 HTML 部分（无需修改，保持你的原代码即可） #

body{
    width:100vw;
    overflow:hidden;
    margin:0;padding:0;
}
.wrapper{
    height:100%;
    width:100vw;
    background:none;
}
.wrapper div{
    float:left;
    height:100px;
    width:100px;
    background-color: #a0a0a0;
    margin:10px;
    cursor:pointer;
}
.output{
    font-size:2em;
    height:200px;
    width:100vw;
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
}
.output div{
    height:200px;
    width:100vw;
}
.output div div{
    position:relative;
    display:block;
    float:left;
    width:100vw;
    height:200px;
}
.vp{
    background-color:#a0a0a0;
    left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="output">
    <div></div>
</div>

关键修改点说明 #

1. 滚动位置计算：用target.offset().left - outputContainer.offset().left得到元素相对于滚动容器的内部偏移量，这才是scrollLeft需要的正确值，无论容器是否滚动、页面是否有其他布局偏移，这个计算都能准确生效。
2. 选择器优化：用output.find("div:nth-child(" + index + ")")直接从目标容器内查询元素，比全局的$(".output div div:nth-child(...)")更精准，避免意外匹配到页面上其他无关的div。
3. 移除冗余代码：删掉了$(this).removeClass("vp")，因为这个类只需要给克隆体添加，原元素不需要操作这个类。
4. 替换setTimeout：用requestAnimationFrame替代固定时长的setTimeout，确保DOM完全更新后再计算滚动位置，避免因DOM渲染延迟导致的计算错误。

这样修改后，无论你点击哪个元素，都能准确滚动到对应的克隆体位置啦～

内容的提问来源于stack exchange，提问作者Tobias Glaus