使用溢出-y：滚动将元素定位在可见视口窗口的中心答案

【问题标题】：Position element in centre of visible viewport window with overflow-y:scroll使用溢出-y：滚动将元素定位在可见视口窗口的中心
【发布时间】：2016-05-23 16:13:40
【问题描述】：

我相当粗略地构建了这个网站，它使用类似于 iOS Safari 选项卡视图的效果来查看虚拟书的各个页面。除了我无法在可见视口中将每个页面居中之外，一切都运行良好。例如，如果您向下滚动到最后的“页面”并单击它，它会跳转到文档的顶部，而不是停留在可见视口的中心。

我认为这与可滚动 div 使用溢出-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/

谢谢！

【问题讨论】：

尝试从activated 中删除top 值... jsfiddle.net/ontu1ngq/1
嗨@DanielPinzon，感谢您的反馈！从激活的页面中删除顶部值有点工作，但是如果您单击“页面”之一并且它没有完全在窗口中，那么如果有意义的话，它会显示一半在可见窗口之外？

标签： javascript jquery html css scrolltop

【解决方案1】：

您需要获取#wrapper 已滚动的数量，以便您可以使用它来相应地设置.page 的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/

【讨论】：