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

Posted 2023-03-12

【中文标题】如何使我的固定位置文章滑块在 iPad 上平滑

【英文标题】：How can I make my fixed position article slider smooth on the iPad

【发布时间】：2012-08-01 10:14:06

【问题描述】：

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

我使用 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 固定定位错误，在这个项目中对我来说不是问题，因为最终版本将是手势控制的。

【问题讨论】：

只滚动带有文本的面板怎么样..不是整个窗口。这样您将只能更改边距，下一个面板将自动在其默认位置（滚动到顶部）

感谢 simekadam 的想法，它对我有用。我仍然需要为桌面正常滚动页面，所以我针对 iPad 的屏幕尺寸，只是为它们滚动了面板。这引发的唯一问题是，通过使面板可滚动，它会禁用看起来不太好的弹性滚动。我可以使用 -webkit-overflow-scrolling:touch; 重新启用它。但随后页面转换变得非常缓慢和生涩。所以并不完美，但希望现在可以接受。

其实我现在正拿着 iPad 坐在这里，我会测试一下，然后可能会回复一些进一步的想法如何解决 ir

【参考方案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 函数它可能会表现得更好..我认为在你的代码中可能会出现这些延迟和超时的问题..

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

祝你好运！

【讨论】：

非常感谢您抽出宝贵时间查看此内容。我将尝试实施您的建议并报告。

以防万一有人想知道 - 我最终为此使用了 3d 变换。它利用 ipad 硬件加速并创建了适当的平滑过渡。