實施點擊事件與更新的偏移位置

我有一個按鈕，單擊時，它將默認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。 –

實施點擊事件與更新的偏移位置

回答

相關問題