0

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

我使用 CSS3 转换实现了这一点，方法是将传出文章的上边距设置为等于当前 $(window).scrollTop() 值的负值，然后使用 $(window).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 上添加负边距和 $(window).scrollTop(0) 不会立即发生，因此在文章被拉回之前，当窗口滚动到顶部时，您会看到轻微的光点到位。

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

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

4

1 回答 1

0

哇..所以我查看了您的代码并感到很困惑..看起来很复杂：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 功能它可能会表现得更好..我认为在你的代码中可能会出现这些延迟和超时的问题..

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

祝你好运！

于 2012-08-01T20:44:46.713 回答