Question

我正在尝试创建一种效果，其中页面某个区域内列表中的div会变大，而不会在越过转换点时闪烁（Chrome中的突出问题，也可能是其他浏览器）。

Here's a jsfiddle of my current situation.

我已经完成了我所需要的东西，这要归功于Stackoverflow上的一个很好的jsfiddle贡献 - 但是当我添加自己的缩放效果时，如果你在过渡边界上滚动得太慢，那就会有点闪烁。这显然是因为尺度过渡（或正常的高度/宽度变化）一旦它已经通过过渡点就会导致边界收缩，反之亦然。

是否有一种方法可以使用CSS方法进行此操作，或者我是否需要更改脚本 - 在这种情况下（因为我不熟悉这种数学方程式））怎么样？

$(document).ready(function () {
    $(window).on('scroll', function () {
        var windowHeight = $(window).height(),
            gridTop = windowHeight * .3,
            gridBottom = windowHeight * .6;
        $('ul li').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();

            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
               // $(this).css('background', 'red');
                                    $(this).addClass('in_zone');
                            } else {
                //$(this).css('background', 'silver');
                                    $(this).removeClass('in_zone');
            }
        });
    });
    $(window).trigger('scroll');
});

Answer 1

问题是由于您检查了元素底部位于区域底部之外。当元素被放大时，下一次scroll触发它将恢复到较小的状态，因为元素的底部在区域之外。然后，下一次滚动它将再次变大，因为较小的元素现在完全在该区域内，依此类推。

要解决此问题，您只需要将检查基于该区域内元素的顶部，如下所示：

if (thisTop > gridTop && thisTop < gridBottom) {
    $(this).addClass('in_zone');
} else {
    $(this).removeClass('in_zone');
}

// Note that you can also re-write this logic with a single call to `toggleClass()`:
$(this).toggleClass('in_zone', thisTop > gridTop && thisTop < gridBottom);

您还需要确保CSS缩放原点位于元素的顶部，以便top位置是静态值。您可以使用transform-origin（以及它的供应商前缀等价物）来执行此操作：

transform-origin: 50% 0%;

Working example

或者，您需要制作“大型”游戏。状态较小，或命中区域较高，但当元素靠近检测区域的边界时，会遇到同样的问题。

是否可以在滚动状态之间没有闪烁的情况下进行CSS缩放转换？

1 个答案: