带有溢出-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的可见视口窗口中心的位置元素

回答

相关问题