Please help me. I am developing a website. On it, according to the designer's idea, it should have 5 sections, 3 sections are already ready. But on all sections except "about" and "jobs" there should be a normal scroll, and on sections "about" and "jobs" full-screen scroll. And in section "jobs" it should be a vertical slider that slides secions "fieldsOfOperation", "expertise", "services". I tried using the fullpage.js plugin, but it makes the whole site full screen, the same situation with the pagepiling.js plugin.
<body>
<header class="header" id="header">
<!-- some code here -->
</header>
<main>
<div class="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&Gas, Energy and Chemistry industries in the Middle East and Central Asia.
</div>
<img class="about__img" src="./img/about__img.svg" alt="Map">
<div class="about__text-two">Since establishment in 2014, FUTURIS has gained trust and has been
registered
by the leading Oil&Gas Companies operating
in Central Asia and strives to contribute to the successes of the Clients' projects.</div>
</div>
<div class="jobs">
<section class="fieldsOfOperation">
<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>
</section>
<section class="expertise">
<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>
</section>
<section class="services">
<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>
</section>
</div>
</main>
</body>
As I said above, I tried to use plugins such as fullpage.js and pagepilling.js. But i got stucked with this problem. Please help, how can I combine normal scrolling with full-screen scrolling on one site.
You can use scrollable sections for sections with content larger than he viewport by using the scrollOverflow option in fullPage.js.
More on the fullPage.js documentation