我相当粗略地构建了这个网站,它使用类似于 iOS Safari 选项卡 View 的效果来查看虚拟书籍的各个页面。除了我无法在可见视口(viewport)中将每个页面居中之外,一切都运行良好。例如,如果您向下滚动到最后的“页面”并单击它,它会跳转到文档的顶部,而不是停留在可见视口(viewport)的中心。
我认为这与可滚动 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/
谢谢!
最佳答案
您需要获取 #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
});
});
看看这个工作 fiddle :https://jsfiddle.net/tardhepc/1/
关于javascript - 使用 overflow-y 将元素定位在可见视口(viewport)窗口的中心 :scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37395829/