如何使我的固定位置文章滑块在 iPad 上平滑

Question

我的客户需要一个文章滚动条，它将外发文章留在当前滚动位置，并在顶部显示新文章。

我使用 CSS3 过渡实现了这一点，方法是将传出文章的上边距设置为等于当前 $(window).scrollTop() 值的负值，然后使用 $(window) 将页面滚动到顶部。滚动顶部（0）。幻灯片完成后，我将外发文章的上边距重置为零，为下一次过渡做好准备。我在http://www.siblify.com/stackslider/ 上传了一个简化示例，但这里是专门管理“下一个”点击滚动的代码。

#container {
height:auto;
width:800px;
position:relative;
overflow:hidden;
margin:0 auto;
padding:60px 0 20px;
}

.slidePanel {
position:absolute;
left:0;
top:0;
width:760px;
z-index:900;
background:grey;
-webkit-transition:left .5s ease-in-out;
-moz-transition:left .5s ease-in-out;
-o-transition:left .5s ease-in-out;
padding:60px 20px 20px;
}

.prevPanel {
left:-800px;
}

.currentPanel {
z-index:1000;
display:block;
}

.nextPanel {
left:800px;
}

div.sliding {
left:0;
}

div.slidingOffLeft {
left:-840px;
}

div.slidingOffRight {
left:840px;
}

<div id="controls">
        <a href="prev">Prev</a> <a href="next">Next</a>
    </div>

    <div id="container">
        <div class="prevPanel slidePanel">
            <!-- content here -->
        </div>

        <div class="currentPanel slidePanel">
            <!-- content here -->
        </div>

        <div class="nextPanel slidePanel">
            <!-- content here -->
        </div>
    </div>

$('a[href="next"]').click(function(i) {
        i.preventDefault();
        $('.prevPanel').remove();
        $('.currentPanel').css({
            "margin-top": "-" + $(window).scrollTop() + "px"
        });
        $(window).scrollTop(0);
        $('.currentPanel').addClass('slidingOffLeft').delay(500).removeClass('slidingOffLeft currentPanel').addClass('prevPanel');
        $('.nextPanel').addClass('sliding').delay(500).removeClass('sliding nextPanel').addClass('currentPanel');
        setTimeout(function() {
            $('#container').height($('.currentPanel').height());
            $('.prevPanel').css({
                'margin-top': '0px'
            });
        }, 500)

        })

此方法在桌面浏览器上完美运行，但在 iPad 上添加负边距和 $(window).scrollTop(0) 不会立即发生，因此当窗口在文章之前滚动到顶部时，您会看到轻微的闪烁被拉回原位。

任何关于如何让这两个事件在 iOS 上同时触发的建议或可以提高性能的替代方法将不胜感激。

注意：在我的示例中，“上一个”和“下一个”按钮在点击时会跳下页面。这是一个已知的 iOS 固定定位错误，在这个项目中对我来说不是问题，因为最终版本将是手势控制的。

Answer 1

哇..所以我查看了您的代码并感到很困惑..看起来很复杂：D 你有很多课程切换和...... 我将如何以某种方式解决这个问题..（警告我很累，所以我将使用某种伪代码:)）

DIV 1 with overflow hidden and fixed bounds
 DIV 2 which will be as wide as sum of widths of all panels
  PANEL 1 fixed width height and so on..
  PANEL 2
  .....
  PANEL N
 2 VID :)
1 VID

然后你可以像这样将 CSS TRANSFORM 应用到DIV 2

CSS:
DIV 2
  -webkit-transntion:  left 500ms;
  // in case you will be faced with flickering while the transition going on try using this - should help
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;   

那么你的 JS 中就可以有这样的东西了

 onTouchForwardButton
     offset = DIV_2.left - currPanel.next().width()
     DIV_2.css(left, offset);

再次......当你不会滚动整个身体时，你可以避免使用 scrollTop 功能..或者你可以将它推迟到转换回调..你可以使用webkitTransitionEnd 事件来处理它。但是我认为在这种情况下只滚动每个面板元素更有意义。所以毕竟尝试这样做，即使使用 scrollTop 函数它可能会表现得更好..我认为在你的代码中可能会出现这些延迟和超时的问题..

再次为这个讨厌的伪代码感到抱歉，但我懒得写括号等等。也许明天我可以做得更好并重写我的答案..

祝你好运！