Question

好吧，这将是艰难的......希望大师们提出一个解决方案！

这很难解释，但这里有......

我有两个要素：

<style>
#elem1 {
position:absolute;
left:-1400px;
z-index:1000;
width:100%;
}
.anim {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.overr {
  transform:translate(1400px,0);
  -ms-transform:translate(1400px,0); 
  -webkit-transform:translate(1400px,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}  
</style>
<script>
$('#btn a').click(function(){
 currentPos = $(window).scrollTop();
 $('#elem1).toggleClass('overr');
 $('#elem1).attr('style', 'top:' + currentPos + 'px;');

 setTimeout(function() {
  $('#elem2').toggle(0);
  $('#elem1').attr('style', 'top:0');
  $(window).scrollTop( 0 );
  }, 500)
});
</script>

<div id="elem1" class="anim">content here</div>
<div id="elem2">content 2 here></div>

我想在这里实现的是：元素2根本没有样式，只是一个简单的元素。单击按钮，获取＃elem2位置，将＃elem1从左侧带入抽屉，使其顶部位于屏幕的当前位置，然后隐藏＃elem2，＃elem1返回顶部，屏幕向上滚动。

结果是，我在同一页面上，在底部加载一个完全不同的内容，我可以滚动而不会过度滚动（这在iPhone上需要很多 - 移开顶部和底部的条形 - 实际上这就是我需要这个的原因。）

问题：

问题是屏幕在最后一个$（窗口）闪烁.scrollTop（0） - 该死的屏幕闪烁。如果我在页面顶部启动脚本，它不会闪烁。

a）我尝试更改脚本的顺序，但更改内容并没有给我所需的结果。 b）将过渡效果更改为“线性”会使效果更好，但您仍然可以看到它。

我知道这件事很难，但希望有人能帮助我！

编辑：看起来是$（'＃elem2'）。toggle（0）和$（window）.scrollTop（0）同时触发，所以在瞬间闪烁看起来它也带来了＃elem2在顶部，这就是它闪烁的原因......：/我到目前为止浪费了4个小时:(

edit2：即使完全删除动画过渡，仍然会闪烁。我睡觉了，再也不能保持清醒了......希望我早上有礼物：/

Answer 1

如果是白色闪光，这实际上是一个css3问题。我过去曾经发生这种情况，试着加上这个。

-webkit-transform-style: preserve-3d;

到.anim和.overr类。

Answer 2

您是否考虑过使用动画功能？可以实现这一点，以便在上一个动画完成之前不会发生后续的样式更改。显然你可以根据需要嵌套尽可能多的动画（为了说明的目的，我只在下面嵌套了几个），这消除了多任务处理时出现的问题。

<style type="text/css">
    #elem1 {
    position:absolute;
    left:-1400px;
    z-index:1000;
    width:100%;
    }
</style>
<input id="btnA" type="button" value="Click Me" />
<div id="elem1">Element 1</div>
<div id="elem2">Element 2</div>
<script type="text/javascript">
    $('#btnA').click(function () {
        currentPos = $(window).scrollTop();
        $('#elem1').animate(
            { left: 0 }
            , {
                duration: 500
                , easing: "linear"
                , complete: function () {
                    $('#elem2').toggle(0);
                    $('#elem1').animate(
                        { top: 0 }
                        , {
                            duration: 0
                            , complete: function () {
                                $(window).scrollTop(0);
                            }
                        }
                    );
                }
            });
    });
</script>

参考文献：http://api.jquery.com/animate/

Answer 3

不确定这是否会对你有所帮助，但我对ios滚动动画有类似的问题。我通过使用scrollTo插件并设置轴来解决它，例如：

$.scrollTo(target, 400, {offset:-60, axis:'y'});

这是我发现的唯一可以阻止闪烁的事情。

Answer 4

我的解决方案并不直接相关，但它包含闪烁的固定元素和scrollTop（），因此我确信Google会在此处接听某人。

我将动画放在步骤中，而不是直接设置scrollTop属性的动画。希望有所帮助。

var position_st = $(window).scrollTop();
var position_en = $(scroll_to_selection).offset().top;

$('#body-animator').stop().animate({
    textIndent: 100
}, {
    duration: 750,
    step: function(num) {

        var val = (num / 100 * (position_en - position_st)) + position_st;

        $('html, body').scrollTop(val);

    },
    complete: function() {

        $(this).css({
            textIndent: 0
        });

    }
});

Answer 5

不幸的是，iOS处理元素转换的方式有点奇怪。它们在滚动结束时“刷新”。我知道如何避免这种情况的唯一方法是使用一些静态元素，如导航栏或浮动页脚。他们不使用任何JavaScript或CSS来改变他们的呈现方式。我知道这不是一个解决方案，但希望这有助于您更好地理解iOS webkit：）

Answer 6

我想用0ms动画滚动到页面的顶部，但是在滚动后的ios 8.3上大多数时候都会闪烁。我回去添加一个400ms的动画并抛弃了ScrollTo：

$('html, body').animate({
    scrollTop: 0
}, 400);

现在获得0闪烁..以及一个精美的动画滚动到页面顶部。 1000毫秒是生涩的。希望这有助于某人。

转换后的jquery元素闪烁和ios上的scrolltop

6 个答案: