Swiper.js垂直滑块功能求助：视口触发切换+强制滑完再滚动

针对你提出的两个问题，以下是具体实现方案：

问题1：仅当滑块完全进入视口时允许切换 #

利用Intersection Observer API检测Swiper容器是否完全显示在视口中，动态控制Swiper的交互权限：

// 初始化垂直Swiper，默认禁用交互
const swiper = new Swiper('#swiper', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
  },
  enabled: false, // 初始状态禁用滑块切换
});

// 配置观察者：仅当元素100%进入视口时触发
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 元素完全可见时启用滑块，离开时禁用
    swiper.enabled = entry.isIntersecting;
  });
}, { threshold: 1.0 });

// 开始监听Swiper容器
observer.observe(document.getElementById('swiper'));

问题2：完成所有滑块切换后才可滚动到projects区块 #

通过监听Swiper的切换事件，结合页面滚动拦截，实现滚动限制：

const projectsSection = document.querySelector('.projects');
let allowScrollToProjects = false;

// 监听滑块切换事件
swiper.on('slideChange', () => {
  // 判断是否切换到最后一个滑块（索引从0开始）
  if (swiper.activeIndex === swiper.slides.length - 1) {
    allowScrollToProjects = true;
    // 可选：给projects区块添加样式，提示用户可继续滚动
    projectsSection.classList.add('scrollable');
  }
});

// 拦截滚动行为，未完成滑块切换时阻止滚动到projects
window.addEventListener('scroll', () => {
  if (!allowScrollToProjects) {
    const swiperEl = document.getElementById('swiper');
    const swiperBottom = swiperEl.getBoundingClientRect().bottom;
    // 当页面尝试滚动过Swiper区域时，强制拉回
    if (swiperBottom < window.innerHeight) {
      window.scrollTo({
        top: swiperEl.offsetTop + swiperEl.offsetHeight - window.innerHeight,
        behavior: 'instant'
      });
    }
  }
});

辅助CSS（可选） #

给projects区块添加过渡效果，提升体验：

.projects {
  margin-top: 100vh; /* 初始占满视口，避免提前滚动到此处 */
  transition: margin-top 0.3s ease;
}

.projects.scrollable {
  margin-top: 0;
}

原始HTML代码 #

<header class="header">
    <!-- some code here... -->
</header>
<main>
    <div class="about" id="about">
        <div class="about__text-one">We are a UAE-based EPC company proved itself remarkably effective in
            engineering,
            procurement and construction that
            supports the Oil&amp;Gas, Energy and Chemistry industries in the Middle East and Central Asia.</div>
        <img class="about__img" src="./img/about__img.svg" alt="Map" width="800px" height="">
        <div class="about__text-two">Since establishment in 2014, FUTURIS has gained trust and has been
            registered
            by the leading Oil&amp;Gas Companies operating
            in Central Asia and strives to contribute to the successes of the Clients' projects.</div>
    </div>
    <div style="--swiper-pagination-color: #000; --swiper-pagination-left: 150px; --swiper-pagination-bullet-size: 15px;"
        class="swiper" id="swiper">
        <div class="swiper-pagination"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <h2 class="fieldsOfOperation__title">Fields of Operation</h2>
                <div class="fieldOfOperation__texts">
                    <span class="fieldOfOperation__text">Oil & Gas</span>
                    <span class="fieldOfOperation__text">Chemistry</span>
                    <span class="fieldOfOperation__text">Energy</span>
                </div>
            </div>
            <div class="swiper-slide">
                <h2 class="expertise__title">Expertise</h2>
                <div class="expertise__texts">
                    <span class="expertise__text">Drilling Equipment</span>
                    <span class="expertise__text">Instrumentation & Electrical</span>
                    <span class="expertise__text">Valves & Pumps</span>
                    <span class="expertise__text">Mechanical Equipment & Rotating Machinery</span>
                    <span class="expertise__text">Process Equipment</span>
                </div>
            </div>
            <div class="swiper-slide">
                <h2 class="services__title">Services</h2>
                <div class="services__texts">
                    <span class="services__text">Automation & Control</span>
                    <span class="services__text">Commissioning & Decommissioning</span>
                    <span class="services__text">Welding</span>
                    <span class="services__text">Isolation</span>
                    <span class="services__text">Operational Assurance</span>
                    <span class="services__text">Destructive Testing</span>
                    <span class="services__text">Hydrotesting</span>
                    <span class="services__text">Intelligent Pigging</span>
                    <span class="services__text">Pipeline Equipment Maintenance</span>
                    <span class="services__text">Flow Assurance</span>
                    <span class="services__text">Construction</span>
                    <span class="services__text">Wiring</span>
                </div>
            </div>
        </div>
    </div>
    <section class="projects">
        <!-- some code here... -->
    </section>
</main>

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