帶有溢出-y：scroll的可見視口窗口中心的位置元素

我已經非常粗略地構建了這個網站，它使用類似於iOS Safari標籤視圖的效果來查看虛擬書籍的各個頁面。除了我無法將每個頁面居中在可見視口中的事實外，一切工作都很好。例如，如果向下滾動到最終的「頁面」並單擊它，它將跳轉到文檔的頂部，而不是停留在可見視口的中心。帶有溢出-y：scroll的可見視口窗口中心的位置元素

我認爲這是與滾動div使用overflow-y：scroll的事實有關，但我無法弄清楚我的生活如何解決問題。

任何幫助將不勝感激！

這裏是我的jQuery：

jQuery(document.body).on('click', '.page', function() { //Change to touchstart 

// Generate number between 1 + 2 
var randomClass = 3; 
var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1; 

// Initialise & Random Number 
jQuery(this).addClass("activated").addClass('scaled-' + randomNumber); 

// Exiting - Reset All 
jQuery(document.body).on('click', '.activated', function() { //Change to Touchstart 
    jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3"); 
}); 
});

這裏是我所有的代碼，這樣你可以得到我想要達到更好的想法的jsfiddle。

https://jsfiddle.net/ontu1ngq/

謝謝！

來源

2016-05-23 kieranstartup

嘗試刪除從'top'值'activated' ... https://jsfiddle.net/ontu1ngq/1/ – DaniP

嗨@DanielPinzon，感謝您的反饋！從激活的有點作品中刪除頂部的值，但如果點擊其中一個「頁面」並且它不完全在窗口中，那麼如果有意義的話，它會在可見窗口中顯示一半。 – kieranstartup

您需要獲取#wrapper已滾動的金額，以便您可以相應地使用它來設置的top。然後，當您刪除.activated類時，您只需要刪除內聯top樣式。

jQuery(document.body).on('click', '.page', function() { 
    var randomClass = 3; 
    var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1; 
    jQuery(this).addClass("activated").addClass('scaled-' + randomNumber); 

    var wrapper_scrollTop = $("#wrapper").scrollTop(); //gets amount scrolled 
    var half_wrapper = $("#wrapper").height()*(0.5); //50% of wrapper height 
    jQuery(this).css("top",half_wrapper+wrapper_scrollTop); 

    jQuery(document.body).on('click', '.activated', function() { 
     jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3"); 
     jQuery(this).css("top","") //returns top to original value specified in css 
    }); 
});

看看這個工作提琴：https://jsfiddle.net/tardhepc/1/

來源

2016-05-23 17:17:55 digglemister

是的，它非常完美，非常感謝！ – kieranstartup

帶有溢出-y：scroll的可見視口窗口中心的位置元素

回答

相關問題