scrollify在position:fixed定位的div中失效，求解决方案

Scrollify 默认基于视口（window）的滚动逻辑工作，而 position: fixed 元素脱离文档流，会导致插件无法正确识别容器的滚动上下文、尺寸或滚动事件。以下是几种无需禁用fixed定位的解决思路：

1. 明确指定Scrollify的滚动容器 #

通过配置 scrollContainer 参数，让Scrollify以你的fixed容器作为滚动上下文，而非默认的window。同时确保fixed容器有明确的宽高和溢出设置：

示例代码： #

HTML结构：

<div class="fixed-scroll-wrap" style="position: fixed; top: 0; right: 0; width: 400px; height: 100vh; overflow-y: auto;">
  <div class="scroll-section">区块1</div>
  <div class="scroll-section">区块2</div>
  <div class="scroll-section">区块3</div>
</div>

JS初始化：

$.scrollify({
  sectionContainer: ".scroll-section", // 滚动区块选择器
  scrollContainer: ".fixed-scroll-wrap", // 指定fixed容器为滚动上下文
  scrollSpeed: 800,
  easing: "easeInOutQuad",
  scrollbars: true, // 保留原生滚动条（可选，按需关闭）
  offset: 0
});

注意：需确保每个 .scroll-section 的高度等于fixed容器的高度（可通过CSS设置 height: 100%;）。

2. 重写Scrollify的滚动位置获取/设置方法 #

若指定容器后仍有问题，可手动替换Scrollify依赖的滚动位置相关方法，强制它使用fixed容器的滚动状态：

// 初始化Scrollify（基础配置）
$.scrollify({
  sectionContainer: ".scroll-section",
  scrollSpeed: 800
});

// 重写Scrollify的滚动位置处理逻辑
$.scrollify.getScrollTop = function() {
  return $(".fixed-scroll-wrap").scrollTop();
};
$.scrollify.setScrollTop = function(val) {
  $(".fixed-scroll-wrap").scrollTop(val);
};

// 解绑默认的window滚动监听，绑定到fixed容器
$(window).off("scroll", $.scrollify.handleScroll);
$(".fixed-scroll-wrap").on("scroll", $.scrollify.handleScroll);

3. 嵌套滚动容器隔离上下文 #

在fixed容器内部新增一层滚动容器，让Scrollify作用于内层容器，外层fixed仅负责定位：

示例代码： #

HTML结构：

<div class="fixed-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh;">
  <!-- 内层滚动容器 -->
  <div class="inner-scroll" style="height: 100%; overflow-y: auto;">
    <div class="scroll-section">区块1</div>
    <div class="scroll-section">区块2</div>
    <div class="scroll-section">区块3</div>
  </div>
</div>

JS初始化：

$.scrollify({
  sectionContainer: ".scroll-section",
  scrollContainer: ".inner-scroll",
  scrollbars: false, // 关闭原生滚动条，仅用Scrollify的平滑滚动
  updateHash: false
});

4. 排查父元素的定位干扰 #

如果fixed容器的父元素存在 transform、perspective 或 filter CSS属性，会导致fixed元素的定位上下文从视口变为该父元素，进而干扰Scrollify的尺寸计算。此时需移除这些属性，或调整DOM结构，让fixed容器直接作为body的子元素。

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