不使用position: sticky如何实现仅图片滚动而非整个页面滚动

该需求可直接通过你已有的jQuery + 少量CSS实现，无需额外引入第三方库，且不需要修改图片之外的原有元素代码。

实现思路 #

1. 禁用页面默认滚动行为，保证除图片外的所有内容固定不动
2. 监听用户的滚动操作，仅动态调整图片的垂直偏移量，模拟常规滚动效果
3. 限制图片偏移范围，避免滚动到图片上下边界后出现空白

具体代码修改 #

第一步：新增CSS样式 #

在你现有的stylesheet.css中添加以下代码：

html, body {
  height: 100%;
  overflow: hidden;
}
.scroll-img {
  /* 保证图片宽度自适应不超出容器 */
  max-width: 100%;
  display: block;
}

第二步：修改图片标签 #

给你的img标签加个类名：

<img src="verticalImage.png" class="scroll-img" />

第三步：新增JS逻辑 #

在你原有引入jQuery的代码之后添加以下脚本：

$(function() {
  const $img = $('.scroll-img');
  // 图片加载完成后计算参数
  $img.on('load', function() {
    const viewportHeight = $(window).height();
    const imgHeight = $img.height();
    // 最大可滚动距离（图片需要向上移动的总高度）
    const maxOffset = imgHeight - viewportHeight;
    let currentOffset = 0;

    // 监听滚轮事件
    $(window).on('wheel', function(e) {
      // 滚轮向上滚动为负，向下为正，调整偏移量
      currentOffset += e.originalEvent.deltaY;
      // 限制偏移范围：最小0（图片顶部对齐视口顶部），最大maxOffset（图片底部对齐视口底部）
      currentOffset = Math.max(0, Math.min(currentOffset, maxOffset));
      // 应用偏移
      $img.css('transform', `translateY(-${currentOffset}px)`);
      // 阻止默认滚动行为
      e.preventDefault();
    });

    // 兼容移动端触摸滚动
    let touchStartY = 0;
    $(window).on('touchstart', function(e) {
      touchStartY = e.originalEvent.touches[0].clientY;
    });
    $(window).on('touchmove', function(e) {
      const touchMoveY = e.originalEvent.touches[0].clientY;
      const delta = touchStartY - touchMoveY;
      currentOffset += delta;
      currentOffset = Math.max(0, Math.min(currentOffset, maxOffset));
      $img.css('transform', `translateY(-${currentOffset}px)`);
      touchStartY = touchMoveY;
      e.preventDefault();
    });
  });
});

适配说明 #

如果你的图片上方有标题等占位内容，需要调整偏移的基准值，只需要在计算maxOffset的时候减去图片上方元素的总高度即可，其余逻辑无需修改。

内容的提问来源于stack exchange，提问作者anon