Question

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

我通过将传出文章的上边距设置为等于当前$（窗口）.scrollTop（）值的负值，然后使用$（窗口）将页面滚动到顶部，使用CSS3过渡实现了这一点。 scrollTop的（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上添加负边距和$（窗口）.scrollTop（0）不会立即发生，所以当窗口在文章前滚动到顶部时，您会看到轻微的光点被拉回原位。

关于如何在iOS上同时触发这两个事件或者提高性能的替代方法的任何建议都将非常感激。

注意：在我的示例中，“prev”和“next”按钮会在点击时向下跳转页面。这是一个已知的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函数。或者你可以将它推迟到transtion回调中。你可以用webkitTransitionEnd事件来处理它。我觉得在这种情况下，只滚动每个面板元素会更有意义。因此，毕竟尝试这样做，即使使用scrollTop函数也可能表现得更好。我认为在您的代码中可能会出现延迟和超时问题..

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

祝你好运！

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

1 个答案: