开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用HTML5/CSS3而不是JavaScript滚动卷轴/羊皮纸

问使用HTML5/CSS3而不是JavaScript滚动卷轴/羊皮纸
EN

Stack Overflow用户

提问于 2014-03-13 02:38:38

回答 1查看 1.2K关注 0票数 2

有没有一种方法可以只使用HTML5和CSS3来创建一个视觉上充当scroll/parchment的框架？到目前为止，我已经通过使用JavaScript实现了这一点，但是在移动设备上，scroll事件并不经常触发，这会使scroll的页眉和页脚卡顿。

var paperHeight = 1710;
var viewHeight = 0;
var scrollTopOffset = 240 - paperHeight;
var scrollBottomOffset = scrollTopOffset - paperHeight;

$(function() {
  $(window)
    .on('resize', function() {
      viewHeight = $(window).height() - $('.container').outerHeight() + viewHeight - $('.footer').outerHeight();
      $('.scroll-view')
        .height(viewHeight)
    })
    .trigger('resize');

  $('.scroll-view')
    .on('scroll', function() {
      $('.scroll-top')
        .css("background-position", "0 " + (paperHeight - scrollTopOffset + $(this).scrollTop()) + "px");

      $('.scroll-bottom')
        .css("background-position", "0 " + (viewHeight + scrollBottomOffset + $(this).scrollTop()) + "px");
    })
    .trigger('scroll');
})

网址：https://pendrokar.github.io/magia-ts/index.html

源代码：https://github.com/Pendrokar/magia-ts/

如果您的浏览器滚动不流畅，我所知道的查看滚动动画的最好方法是在内容上使用鼠标中键，然后上下移动鼠标。

因此，滚动的作用如下所示。当向上或向下滚动内容时，页眉和页脚滚动到相反的方向。页眉和页脚显示了将要发生的事情或以前发生的事情的反向图像。JavaScript版本使用的背景图像只是复制和反转的原始图像，使用CSS3变换矩阵只需要一张图像。

我认为这可以在溢出的“scroll”元素中使用显示“绝对”或“固定”元素，但这两个元素都不会在内容滚动时停留在它们的位置。

HTML5画布是另一种选择，但它可能仍然像JavaScript画布一样慢。

EN

回答 1

Stack Overflow用户

发布于 2014-03-13 02:58:33

您的滚动图像的大小远远超过了半兆字节。

对于一个移动浏览器来说，这个大小可能太大了，无法在不卡顿的情况下处理。

(特别是因为它被绘制了3次。)

尝试使用这个下采样版本的卷轴，它的重量为56K：

如果你不能让移动端在你的设计中频繁地触发滚动事件，那么你可以使用html5 canvas，它可以让你更好地控制重绘速率。但首先尝试使用较小的图像，看看这是否能解决你的手机卡顿问题。

祝你的游戏好运！

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22360878

复制

相似问题