位置元素位于可见视口窗口的中心,带溢出y:滚动

时间:2016-05-23 16:13:41

标签: javascript jquery html css scrolltop

我非常粗略地构建了这个网站,它使用类似于iOS Safari标签视图的效果来查看虚拟图书的各个页面。除了我无法将每个页面置于可见视口中心之外,一切都工作得很好。例如,如果您向下滚动到最后一页'然后单击它,它会跳转到文档的顶部,而不是停留在可见视口的中心。

我认为这与可滚动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/

谢谢!

1 个答案:

答案 0 :(得分:1)

您需要获取#wrapper已滚动的金额,以便您可以使用它来相应地设置top的{​​{1}}。然后,当您删除.page类时,您只需要删除内联.activated样式。

top

看看这个工作小提琴:https://jsfiddle.net/tardhepc/1/