我正在缩放一个 div 以便在不滚动的情况下可见。所以我有:
var sliderOffset = $('.field-slideshow-wrapper').offset().top,
windowHeight = $(window).height(),
sliderAllowed = (windowHeight - sliderOffset),
sliderImage = $('.field-slideshow-slide img').height(),
sliderOriginal = (sliderImage + 150),
scale = (sliderAllowed / sliderOriginal);
$('.field-slideshow-wrapper').css({ transform: 'scale(' + scale + ')'});
现在 div 与之前不在同一位置,我需要确定新的顶部偏移量,在 css({ transform: 'scale(' + scale + ')'
是已应用,因此我可以计算一些边距以将此 div 移动到顶部。
如何确定元素的新offset().top
?
最佳答案
有两种方法可以做到这一点,选择权在您。 transform: scale()
将元素向其中心收缩,因此元素的顶部向下移动。缩放元素仍将返回非缩放元素的 offset().top
,因此这将不起作用。
一种选择是确保新缩放的元素会粘在旧元素空间的顶部。只需这样做:
$('.field-slideshow-wrapper').css({
transform: 'scale(' + scale + ') translateY(-50%)'
});
这会使元素向上移动其新高度的 50%,从而将其粘在其旧尺寸的顶部。
另一种选择是做一些简单的计算。获取旧元素的 height
,然后获取 scale() 方法将其“向下”移动的像素数。你可以通过一些计算找到这个数字(见下文),这就是你可以添加到旧的 offset().top 以获得新的数字:
var sliderOffset = $('.field-slideshow-wrapper').offset().top,
windowHeight = $(window).height(),
elHeight = $('.field-slideshow-wrapper').innerHeight(),
sliderAllowed = (windowHeight - sliderOffset),
sliderImage = $('.field-slideshow-slide img').height(),
sliderOriginal = (sliderImage + 150),
scale = (sliderAllowed / sliderOriginal);
var addProportion = 1-scale / 2;
var newOffset = sliderOffset + (addProportion * elHeight);
您应该使用 innerHeight() 还是 outerHeight() 取决于您的布局。
关于javascript - 在 jQuery 中应用 css() 后的新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40305259/