我想通过点击来使一个 div
居中。因此,如果我点击一个 div
,我希望它滚动到浏览器视口的中心。 我不想使用像我看到的指南和示例中的锚点。我该如何实现这个效果?
我想通过点击来使一个 div
居中。因此,如果我点击一个 div
,我希望它滚动到浏览器视口的中心。 我不想使用像我看到的指南和示例中的锚点。我该如何实现这个效果?
您需要以某种方式识别可单击的元素。我建立了一个示例,使用class
属性进行识别。
这是执行此操作的脚本:
$('html,body').animate({
scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);
你尝试的是将容器滚动到页面顶部。你还需要计算并减去容器高度与视口高度之间的差异。将其除以二(因为您希望顶部和底部有相同的空间),然后就可以开始了。
接下来,您需要将单击处理程序添加到所有元素中:
$(document).ready(function () {
$('.image').click( function() {
$('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2 }, 200);
});
});
设置一些HTML/CSS:
<style>
div.image {
border: 1px solid red;
height: 500px;
width: 500px;
}
</style>
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
完成了。
我知道这个问题很老了,但现在你可以使用scrollIntoView方法:
例如:
document.body.scrollIntoView({
behavior: 'smooth',
inline: 'center',
block: 'center'
});
HTMLElement.prototype.scrollToCenter = function(){
window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}
使用纯JavaScript实现在垂直方向上滚动到中心。在水平方向上也类似。我没有考虑元素的高度,因为它们可能大于屏幕的高度。
($(window).height() - $(this).outerHeight(true))/2
小于0
,则您可能会通过滚动超过视口中的该元素,导致不良结果。max(0, 调整因素)
来进行修正。 function scrollIntoView(el) {
var offsetTop = $j(el).offset().top;
var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
var scrollTop = offsetTop - adjustment;
$j('html,body').animate({
scrollTop: scrollTop
}, 200);
}