javascript - 使用更新的偏移位置实现点击事件

Question

我有一个按钮，单击该按钮时，会将默认的 2 列网格更改为单列网格。在此单击事件之后，列中包含元素的 Y 偏移位置会发生变化。

我需要知道更新的 Y 偏移位置，以便能够在列网格更改后立即 scrollTop 到某个元素，但我似乎无法使代码正常工作，并且不确定我的是否可以结构是保持它们同步的正确重构方式。

var lastTrigger;
var target = $('#' + lastTrigger);

$('button').click(function () {
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
    lastTrigger = $(this).closest('div').attr('id');
    scrollView(updateOffset);
});

function updateOffset() {
     var currentOffset = target.offset().top; 
     return currentOffset;
}

function scrollView() {
    $('html,body').animate({
        scrollTop: currentOffset
    }, 1000);
}

Answer 1

这里的问题是，当您单击按钮时，您的 target 并未更新，因为 lastTrigger 在变量初始化时未定义。因此，当您在事件监听器中定义 lastTrigger 时，不会发生任何事情。

I created a fiddle通过仅在初始化 lastTrigger 后初始化 target 并相应更新scrollTop，解决了此问题。

var lastTrigger;
var target;

$('button').click(function () {
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
    lastTrigger = $(this).closest('div').attr('id');
    scrollView();
});

function updateOffset() {
     target = $('#' + lastTrigger);
     var currentOffset = target.offset().top; 
     return currentOffset;
}

function scrollView() {
    $('html,body').animate({
        scrollTop: updateOffset()
    }, 1000);
}

希望能解决您的问题。