I'm building a website with vertical split screens and full viewport sections. Each section is divided in half where every side can have overflow content. When theres no overflowing content, the page should scroll to the next section. When theres overflowing content, it first should scroll to the bottom/top and then to the next/previous section.
For scrolling through sections I'm using scrollify. For overflowing content and nice scrollbars I'm using malihu-custom-scrollbar-plugin.
On desktop everything works fine, but on touch-devices its very buggy. Unfortunately I cant figure out why and how to prevent this buggy behaviour.
I've created a Fiddle
Maybe someone could point me in the right direction?
HTML
<section class="section one" data-section="0">
<div class="content"><div class="inner"><p>Scroll down</p></div></div>
<div class="images"></div>
</section>
<section class="section two" data-section="1">
<div class="content">
<div class="inner">
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="images">
<img src="https://via.placeholder.com/640x320/124477/" />
<img src="https://via.placeholder.com/640x720/2288AA/" />
<img src="https://via.placeholder.com/640x520/AABB44/" />
<img src="https://via.placeholder.com/640x320/124477/" />
</div>
</section>
<section class="section three" data-section="2">
<div class="content"><div class="inner"><p>Scroll up</p></div></div>
<div class="images"></div>
</section>
CSS
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
img {
max-width: 100% !important;
height: auto !important;
vertical-align: bottom;
width: 100%
}
html {
font-size: 62.5%;
height: 100%;
position: relative
}
body {
height: 100%;
font-size: 2rem;
background: #202629
}
.section {
height: 100%;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.section .content,
.section .images {
overflow: auto;
}
.section.one {
background-color: aqua
}
.section.two {
background-color: green
}
.section.three {
background-color: grey
}
.section .images {
background-color: lightblue
}
.section .content .inner {
position: relative;
padding: 5vw 0 0 0
}
.section .content .inner p {
padding: 0 5vw 5vw
}
SCRIPT
$(function() {
$.scrollify({
section : ".section",
scrollbars: true,
easing: "easeOutQuint",
standardScrollElements: "",
setHeights: false,
});
});
$(".content, .images").mCustomScrollbar({
theme:"light-thick",
contentTouchScroll: true,
scrollInertia:600,
scrollEasing:"easeOutQuint"
});