使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸

Posted 2023-03-24

【中文标题】使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸

【英文标题】：Scrolling a scroll/parchment using HTML5/CSS3 instead of JavaScript

【发布时间】：2014-04-17 03:21:26

【问题描述】：

有没有一种方法可以仅使用 html5 和 CSS3 创建一个在视觉上充当scroll/parchment 的框架？目前我已经通过使用 javascript 实现了它，但是滚动事件在移动设备上并不经常触发，这使得滚动的页眉和页脚结结巴巴。

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 变换矩阵只需要一张图像。

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

HTML5 Canvas 是另一种选择，但它可能仍然和 JavaScript 一样慢。

【参考方案1】：

您的滚动图像大小超过 0.5 兆字节。

对于移动浏览器来说，这个大小可能太大了，无法处理而不会卡顿。

（特别是因为它被绘制了 3 次。）

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

如果您不能让移动设备为您的设计经常触发滚动事件，那么您可以使用 html5 画布，它可以让您更好地控制重绘率。但请先尝试使用较小的图像，看看是否能解决您的移动卡顿问题。

祝你的游戏好运！

【讨论】：

变化不大。这可能不是因为滚动事件触发的频率，而是因为使用“背景位置”而不是滚动（使用 javascript）页眉和页脚中的隐藏内容。