网站开发：如何混合普通滚动与全屏滚动及jobs区块垂直滑块？

需求回顾 #

• 网站包含5个区块，仅about和jobs区块需全屏滚动，其余区块保持普通滚动行为
• jobs区块内部的fieldsOfOperation、expertise、services三个子区块，需实现垂直滑块切换
• 直接使用fullpage.js/pagepiling.js会导致全局强制全屏滚动，无法满足混合滚动需求

解决方案一：原生JS + CSS 自定义实现（无依赖，高度定制） #

无需第三方插件，完全自主控制滚动逻辑，避免全局影响。

1. 基础CSS配置 #

区分全屏与普通滚动区块的样式：

/* 普通滚动区块：保持默认高度，正常滚动 */
.header, .other-section {
  min-height: auto;
  padding: 2rem;
}

/* 全屏滚动区块：占满视口高度，隐藏溢出 */
.about, .jobs {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* jobs子区块：全屏高度，绝对定位实现滑块效果 */
.jobs section {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
  padding: 2rem;
  box-sizing: border-box;
}

/* 默认只显示第一个子区块 */
.jobs .expertise, .jobs .services {
  transform: translateY(100%);
}

2. 全局滚动监听与全屏锁定逻辑 #

监听页面滚动，判断是否进入全屏区块，锁定/解锁全局滚动：

const aboutSection = document.querySelector('.about');
const jobsSection = document.querySelector('.jobs');
let isInFullscreenSection = false;

// 获取区块的位置信息
function getSectionPosition(elem) {
  const rect = elem.getBoundingClientRect();
  return {
    top: rect.top + window.scrollY,
    bottom: rect.bottom + window.scrollY,
    height: rect.height
  };
}

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const aboutPos = getSectionPosition(aboutSection);
  const jobsPos = getSectionPosition(jobsSection);

  const inAbout = scrollY >= aboutPos.top && scrollY < aboutPos.bottom;
  const inJobs = scrollY >= jobsPos.top && scrollY < jobsPos.bottom;

  isInFullscreenSection = inAbout || inJobs;

  if (inAbout) {
    window.scrollTo({ top: aboutPos.top, behavior: 'smooth' });
    document.body.style.overflow = 'hidden';
  } else if (inJobs) {
    window.scrollTo({ top: jobsPos.top, behavior: 'smooth' });
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = 'auto';
  }
});

3. Jobs子区块滑块切换逻辑 #

监听jobs区块内的滚轮事件，切换子区块并阻止事件冒泡：

const jobsSections = document.querySelectorAll('.jobs section');
let currentJobSectionIndex = 0;

jobsSection.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止全局滚动干扰
  const delta = e.deltaY;

  if (delta > 0 && currentJobSectionIndex < jobsSections.length - 1) {
    currentJobSectionIndex++;
  } else if (delta < 0 && currentJobSectionIndex > 0) {
    currentJobSectionIndex--;
  }

  // 更新所有子区块的位置
  jobsSections.forEach((section, index) => {
    section.style.transform = `translateY(${100 * (index - currentJobSectionIndex)}%)`;
  });
});

解决方案二：基于fullpage.js的局部全屏配置（利用插件成熟功能） #

fullpage.js支持针对指定容器初始化，而非全局body，通过配置实现局部全屏滚动，保留其他区块的普通滚动。

1. 调整HTML结构 #

给全屏区块单独包裹容器：

<body>
  <header class="header" id="header">
    <!-- 头部内容 -->
  </header>
  <main>
    <!-- about区块包裹容器 -->
    <div id="about-fullpage">
      <div class="about section">
        <!-- about内容 -->
      </div>
    </div>

    <!-- 其他普通滚动区块 -->
    <div class="other-section">
      <!-- 内容 -->
    </div>

    <!-- jobs区块包裹容器，子区块作为fullpage的sections -->
    <div id="jobs-fullpage">
      <section class="fieldsOfOperation section">
        <!-- 内容 -->
      </section>
      <section class="expertise section">
        <!-- 内容 -->
      </section>
      <section class="services section">
        <!-- 内容 -->
      </section>
    </div>
  </main>
</body>

2. 初始化fullpage.js #

分别针对两个容器初始化，配置允许全局其他区域正常滚动：

// 初始化about区块的全屏滚动
new fullpage('#about-fullpage', {
  autoScrolling: true,
  scrollHorizontally: false,
  sectionsColor: ['#ffffff'],
  normalScrollElements: 'body',
  onLeave: function(origin, destination, direction) {
    if (direction === 'down') {
      document.body.style.overflow = 'auto';
    }
  },
  afterLoad: function(origin, destination, direction) {
    if (direction === 'up') {
      document.body.style.overflow = 'hidden';
    }
  }
});

// 初始化jobs区块的全屏滚动（内部子区块自动成为滑块）
new fullpage('#jobs-fullpage', {
  autoScrolling: true,
  scrollHorizontally: false,
  sectionsColor: ['#f5f5f5', '#eaeaea', '#dddddd'],
  normalScrollElements: 'body',
  onLeave: function(origin, destination, direction) {
    if (direction === 'up') {
      document.body.style.overflow = 'auto';
    }
  },
  afterLoad: function(origin, destination, direction) {
    if (direction === 'down') {
      document.body.style.overflow = 'hidden';
    }
  }
});

3. 配套CSS #

给两个容器设置全屏样式：

#about-fullpage, #jobs-fullpage {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.section {
  height: 100vh;
  box-sizing: border-box;
  padding: 2rem;
}

/* 普通滚动区块样式 */
.other-section {
  min-height: 80vh;
  padding: 2rem;
}

方案对比 #

• 原生JS方案：无依赖，完全自定义逻辑，适合高度定制滚动行为的场景，代码量稍大但可控性强
• fullpage.js方案：利用插件成熟的滚动动画、响应式处理等功能，开发速度快，适合对滚动效果要求较高且不想重复造轮子的场景

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