实施点击事件与更新的偏移位置

我有一个按钮，单击时，它将默认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); 
}

来源

2015-05-04 Seong Lee

这里的问题是，你的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); 
}

我希望能够解决您的问题。

来源

2015-05-04 14:11:39

谢谢。这里是你的建议小提琴，但我仍然没有得到我想要的结果。 http://jsfiddle.net/sungsoonz/oumaqgft/14/如果你能帮助实现我的目标，将非常感激。例如如果您单击面板2的展开按钮，我希望滚动在展开视图中移动到面板2。 –

@SeongLee，它不工作，因为显然jQuery动画不能很好地与CSS转换。如果添加超时，以便在转换完成后进行滚动，它将起作用。看看：http://jsfiddle.net/mayacoda/Lb0ytmkw/1/ –

这是完美的！不知道CSS转换会对jQuery动画功能造成麻烦。非常感谢:) –

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

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

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

来源

2015-05-04 14:01:57 vinayakj

需要注意的是，'target'元素是由'nearest'方法返回的元素，因此'$（'＃'+ lastTrigger）'调用是多余的。 – undefined

谢谢，但我不认为我得到了列切换后的目标元素的偏移值。请看我的小提琴http://jsfiddle.net/sungsoonz/oumaqgft/13/例如如果您单击面板2的展开按钮，我希望滚动在展开视图中移动到面板2。 –

实施点击事件与更新的偏移位置

回答

相关问题