Javascript Auto-scroll Appears Jittery on Safari IOS

Javascript Auto-scroll Appears Jittery on Safari IOS - javascript

The Objective
I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.
The problem
Every solution I have found so far uses either setTimeout or setInterval to scroll the page with window.scrollBy(0, 1), and this works great on chrome, however when I test this on Safari IOS, the page does not scroll smoothly at all. It appears very jittery, to the point that the text is no longer legible.
Here is a video demonstrating the problem. (Please watch in 1080p60, since the jitter is more apparent at 60fps)
The code
Here is a simple HTML document to demonstrate my current method of auto scrolling.
let scrollTimeout;
function pageScroll() {
scrollTimeout = setTimeout(() => {
window.scrollBy(0, 1);
pageScroll();
}, 10);
}
function startScroll() {
pageScroll();
}
function stopScroll() {
clearTimeout(scrollTimeout);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Auto-scroll</title>
</head>
<body>
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
ducimus, totam debitis sint modi inventore explicabo iusto
assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
sequi rerum quibusdam nisi provident! Autem aliquid
reprehenderit doloremque inventore quasi dolore fugit tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
molestias consectetur molestiae labore totam ex et eum nulla
officia, minima excepturi voluptates, consequatur amet modi!
Molestiae autem illum ullam accusantium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
</main>
</body>
</html>

Apple throttles their devices to give supposedly battery performance. But there are other reasons like Background App Refresh, Low Battery More, and many more. The easily visible reason is Low Power Mode on you will not get the same performance as Low Power More off.
With your snippet, you can clearly judge the performance difference between Low Power Mode on and Low Power Mode off.
Also, performance can be affected by the display refresh rate. You can manage it with requestAnimationFrame, where you can somewhat control fps.
The below example could help you with requestAnimationFrame.
let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;
function animateScroll(timestamp) {
const deltaTime = timestamp - prevtimeStamp;
prevtimeStamp = timestamp;
const scrollY = window.scrollY;
if(counter > functionTiming){
window.scrollBy(0, 1);
counter = 0;
if(scrollY === window.scrollY)
reachedBottom = true;
}else{
counter += deltaTime;
}
if(reachedBottom)
cancelAnimationFrame(scrollAnimationFrame);
else
scrollAnimationFrame = requestAnimationFrame(animateScroll);
}
function startScroll() {
if(!scrollAnimationFrame)
animateScroll(0);
}
function stopScroll() {
if(scrollAnimationFrame)
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = 0;
}
document.getElementById('functionTimingControl').addEventListener('change', function(e){
functionTiming = e.target.value;
});
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
<input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
</main>

Related

How to hide other div apart from touched div to the band

I want to hide other divs apart from touched div to the band
the band is this element <div class="center-band"></div>
whenever the scrolling element touches the element <div class="center-band"></div> then it has to be shown, and other divs have to be hidden
Question: only touched div to the band has to be shown, and others has to be hidden, that means only one content has to be shown at a time.
jsbin: https://jsbin.com/zudideheza/edit?html,css,js,console,output
$(function()
{
var pos = 1;
var ii = 0;
var intId = setInterval(function()
{
ii++;
pos = - ii;
//console.log(pos);
$('.container').css({
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container {
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents {
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
}
.center-band {
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container" style="transform:translateY(0px);">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"></div>
</div>
Note: I don't want to change scrolling content approach (question is not about positioning)
Please help me thanks in advance!!!!

Try this out:
$(function()
{
var pos = 1;
var ii = 0;
var intId = setInterval(function()
{
ii++;
pos = - ii;
//console.log(pos);
$('.inner-content').css({
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container {
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents {
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
/*visibility:hidden;*/
}
.show{
/*visibility: visible;*/
}
.center-band {
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class=" center-band" style="overflow-y:hidden;">
<div class="inner-content" style=" transform:translateY(0px);">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
</div>
</div>
</div>

It depends on whether you want to include the margins or not, but you can use the following to detect the positions and then apply the class over to the .content divs that are currently hovered over:
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
var intId = setInterval(function() {
ii++;
pos = -ii;
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
$content.removeClass('over');
if (centerbandBottom > contentTop && centerbandTop < contentBottom)
$content.addClass('over');
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
Demo: http://plnkr.co/edit/YwaPy3qz07goW5ZfwARl

This is not exactly the direct answer to your questions, but another approach to solve this. May be this will help you somehow.
var domRect = document.getElementById('center-band').getBoundingClientRect();
var centerBandTop = domRect.top+20;
var centerBandBottom = domRect.top + 58;
$(function(){
var pos = 1;
var ii = 0;
var intId = setInterval(function(){
ii++;
pos =- ii;
$('.container').css({
transform : 'translateY('+pos+'px)'
});
$('.contents').each(function(idx,ele){
var domContent = document.getElementsByClassName('contents')[idx].getBoundingClientRect();
// console.log(idx +'---'+ domContent.top)
if(domContent.top < centerBandBottom && domContent.bottom > centerBandTop ){
//$(ele).text('');
}
else{
//$(ele).css('color','#fff');
}
})
},100);
});
.container{
z-index:999;
width: 100%;
height: 100%;
/*background: #222;*/
font-size: 19px;
color: #222;
position: relative;
}
.contents{
margin-bottom: 15px;
/* border-bottom: 1px solid #424242;*/
padding: 20px;
color:#fff;
}
#center-band{
width: 98%;
height: 78px;
background: #222;
position: fixed;
top: 50%;
}
.wrapper{
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container" style="transform:translateY(0px);">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div id="center-band"> </div>
</div>

Map cant be scrolled in iOS safari sometimes

Example is here
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
<style>
* { margin:0; padding:0; box-sizing: border-box; }
#map {position:fixed; top: 0; left: 0; right: 50%; bottom: 0;}
#content { margin: 0 0 0 50%; background: lightblue;}
p {
padding: 50px
}
</style>
</head>
<body>
<div id="map"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicGF2ZWxzIiwiYSI6ImNpdGN4Zm56MDAwNWEyeW8zcWFoaGNkbHgifQ.o_5rdc4PS-yJV8tkh8cyEA';
var mapEl = document.getElementById('map')
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on('load', () => {
map.on('touchstart', e => console.log('touchstart', e))
map.on('touchmove', e => console.log('touchmove', e))
map.on('touchcancel', e => console.log('touchcancel', e))
map.on('touchend', e => console.log('touchend', e))
map.on('movestart', e => console.log('movestart', e))
map.on('move', e => console.log('move', e))
map.on('moveend', e => console.log('moveend', e))
map.on('dragstart', e => console.log('dragstart', e))
map.on('drag', e => console.log('drag', e))
map.on('dragend', e => console.log('dragend', e))
map.on('error', e => console.log('error', e))
})
var mapTouchFix, tmt;
if (window['Event']) {
mapTouchFix = new Event('touchstart')
}
window.addEventListener('scroll', () => {
console.log('add scroll tmt')
if (tmt) clearTimeout(tmt)
tmt = setTimeout(() => {
console.log('scroll tmt')
fixmap()
}, 1000)
})
document.querySelector('#map').addEventListener('touchstart', () => {
console.log('Ha touch start processed ON MAP')
})
function fixmap () {
console.log('isDragPanEnabled' + map.dragPan.isEnabled())
console.log('isDragPanActive' + map.dragPan.isActive())
var p = map.getPitch()
map.easeTo({
pitch: p + 1
})
map.dragPan.disable()
console.log('dragpan disabled')
setTimeout(() => {
map.dragPan.enable()
map.easeTo({
pitch: p
})
console.log('dragpan enabled back')
}, 1000)
mapEl.dispatchEvent(mapTouchFix)
document.documentElement.dispatchEvent(mapTouchFix)
console.log('fixed', mapTouchFix)
}
</script>
</body>
</html>
Some times after page scrolling user cant scroll map, only possible to scroll map after click on any button or on map itself.
If you cant reproduce it, try to scroll map while page is being scrolled and move map after scrolling is finished.
Reproducible in iPad mini, iPad pro, iPhone with v11.x iOS
I tried to modify CSS to remove anything that could cause such behavior, trigger map methods and fire touchstart events, nothing helps.
Also I implemented two fingers scroll for map in another example, but issue is there sometimes as well.
Some times after page scrolling user cant scroll map, only possible to scroll map after click on any button or on map itself.
If you cant reproduce it, try to scroll map while page is being scrolled and move map after scrolling is finished.
Reproducible in iPad mini, iPad pro, iPhone with v11.x iOS
I tried to modify CSS to remove anything that could cause such behavior, trigger map methods and fire touchstart events, nothing helps.
Also I implemented two fingers scroll for map in another example, but issue is there sometimes as well.

div opacity on scroll top

I am trying to fade out the each blocks while scrolling top. When the particular div reached browser top it should slowly fade away.
I have tried but the problem here is that it is fading out all the divs since all divs have the same class name. I do not want to change the html structure for some reasons.
Is there any way to apply this effect on each divs?
var header = $('.content');
var range = 200;
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var offset = header.offset().top;
var height = header.outerHeight();
offset = offset + height / 2;
var calc = 1 - (scrollTop - offset + range) / range;
header.css({ 'opacity': calc });
if ( calc > '1' ) {
header.css({ 'opacity': 1 });
} else if ( calc < '0' ) {
header.css({ 'opacity': 0 });
}
});
DEMO

I updated your fiddle. Basically, I did the calculation for each div separately by wrapping your code with .each

Check out this different version of answer fiddle.
header.each(function(){
if($(this).position().top - scrollTop <= 0){
$(this).css({ 'opacity': 0 });
}else{
$(this).css({ 'opacity': 1 });
}

You have to calculate the opacity for each element of the class.
Also you have to add a parent element with overflow-y:auto;
var parent = $("#parent");
var childs = $(".content");
var offset_top = 0;
var range = 200;
parent.on('scroll', function () {
var scrollTop = $(this).scrollTop();
if(scrollTop<20){
childs.css("opacity",1);
}
else{
childs.each(function(){
var top = $(this).offset().top - offset_top;
var height = $(this).height();
var offset = height/4;
var opacity = (top+ height - offset) / range;
if(opacity>1) opacity = 1;
else if(opacity<0) opacity = 0;
$(this).css("opacity",opacity);
});
}
});
div {color:#fff; padding:5%}
.content:nth-child(1){background:blue}
.content:nth-child(2){background:grey}
.content:nth-child(3){background:black}
.content:nth-child(4){background:red}
body,html{
height:100%;
}
#parent{
height:50%;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
</div>

"ion-scroll" - not able to scroll vertically

I have written code for horizontal image slider using ion-scroll. It is working properly. But I want my page should be scrollable vertically also.
I can't scroll the whole page by swiping on the contents inside the <ion-scroll> (marked area in image). But I can scroll the page by swiping outside that marked area. If I change the direction="xy" then I can scroll inside the <ion-scroll> contents only.
<ion-content>
<ion-scroll zooming="false" direction="x" style="width: 100%;">
<div style="width: {{albumDetail.sliderWidth}}; repeat">
<span ng-repeat="list in albumDetail.lists">
<a href="#/app/browse/albums/{{albumDetail.type}}/{{list.id}}"><button id="album-card" class="button button-light">
<img width="140px" height="140px" src="{{list.albumArt}}"/>
<p id="album-name-card">{{list.albumName}}</p>
</button></a>
</span>
</div>
</ion-scroll>
</ion-content>

So this has been a long standing issue, there is a way to get it to work but it is a lot of code: i am going to post it here and give the link to a codepen
HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js">
</script>
</head>
<body ng-controller="MyCtrl">
<ion-nav-view>
<ion-view title="Check In Portugal by aptece">
<ion-content class="padding" delegate-handle="mainScroll">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal" horizontal-scroll-fix="mainScroll">
<p>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.<br/>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.</p>
</ion-scroll>
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainScroll">
<p>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.<br/>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.</p>
</ion-scroll>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<img src="http://imgs.xkcd.com/comics/cloud.png" style="border: 0px; width:744px; height:233px; vertical-align: bottom;">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
</ion-content>
</ion-view>
</ion-nav-view>
</body>
</html>
CSS:
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
ion-scroll {
width: 100%;
font-size: 40px;
height: auto;
white-space: nowrap;
padding: 10px;
line-height: 40px;
}
JS:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {
$timeout(function(){
//return false; // <--- comment this to "fix" the problem
var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
$timeout(function(){
//return false; // <--- comment this to "fix" the problem
var sv = $ionicScrollDelegate.$getByHandle('horizontal2').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
});
// Scroll fix directive
(function() {
var HorizontalScrollFix = (function() {
function HorizontalScrollFix($timeout, $ionicScrollDelegate) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var mainScrollID = attrs.horizontalScrollFix,
scrollID = attrs.delegateHandle;
var getEventTouches = function(e) {
return e.touches && (e.touches.length ? e.touches : [
{
pageX: e.pageX,
pageY: e.pageY
}
]);
};
var fixHorizontalAndVerticalScroll = function() {
var mainScroll, scroll;
mainScroll = $ionicScrollDelegate.$getByHandle(mainScrollID).getScrollView();
scroll = $ionicScrollDelegate.$getByHandle(scrollID).getScrollView();
// patch touchstart
scroll.__container.removeEventListener('touchstart', scroll.touchStart);
scroll.touchStart = function(e) {
var startY;
scroll.startCoordinates = ionic.tap.pointerCoord(e);
if (ionic.tap.ignoreScrollStart(e)) {
return;
}
scroll.__isDown = true;
if (ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT') {
scroll.__hasStarted = false;
return;
}
scroll.__isSelectable = true;
scroll.__enableScrollY = true;
scroll.__hasStarted = true;
scroll.doTouchStart(getEventTouches(e), e.timeStamp);
startY = mainScroll.__scrollTop;
// below is our changes to this method
// e.preventDefault();
// lock main scroll if scrolling horizontal
$timeout((function() {
var animate, yMovement;
yMovement = startY - mainScroll.__scrollTop;
if (scroll.__isDragging && yMovement < 2.0 && yMovement > -2.0) {
mainScroll.__isTracking = false;
mainScroll.doTouchEnd();
animate = false;
return mainScroll.scrollTo(0, startY, animate);
} else {
return scroll.doTouchEnd();
}
}), 100);
};
scroll.__container.addEventListener('touchstart', scroll.touchStart);
};
$timeout(function() { fixHorizontalAndVerticalScroll(); });
}
};
}
return HorizontalScrollFix;
})();
angular.module('ionicApp').directive('horizontalScrollFix', ['$timeout', '$ionicScrollDelegate', HorizontalScrollFix]);
}).call(this);

Floating background when collapse a div

I have the following code to make divs collapse but I've realised that when I have a background colour there is a gap between the bar and content. Can anyone figure out how I can remove that gap?
https://jsfiddle.net/upxL42rw/1/
(function($) {
$.fn.collapse = function(method, options) {
var settings = $.extend({
collapse: "collapse",
signTag: "<span></span>",
titles: "h3",
titlesChild: "span",
container: "div",
classOpen: "opened",
open: "+",
close: "−",
rlOpen: "rl-open",
rlClose: "rl-close"
}, options);
var $element = $(this).children(settings.titles);
var $symbols = $(settings.signTag);
var $signOpen = $symbols.html(settings.open);
var $signClose = $symbols.html(settings.close);
var $insertElement = $symbols.appendTo($element);
$element.parent().addClass(settings.collapse);
if ($element.next().hasClass(settings.classOpen)) {
$element.children().html(settings.close).addClass(settings.rlClose);
} else {
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods = {
single: function() {
return this.each(function() {
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
.prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
$element.on('click', function() {
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)) {
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
} else {
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.collapse ');
}
};
})(jQuery);
$(function() {
$("#collapse").collapse('single', {});
});
#wrapper {
margin: 0 auto;
position: relative;
max-width: 640px;
}
.collapse > h3 {
background-color: #007197;
color: #fff;
margin: 0 auto;
padding: 3%;
text-decoration: none;
}
.collapse > h3 > span {
float: right;
}
.collapse > h3 + div {
display: none;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<main class="main-wrapper">
<div id="collapse">
<h3 style="background:black;">One</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:red;">Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:orange;">Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:blue;">Four</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:green;">Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div>
</main>
</div>

You are seeing the effects of collapsing margins between your p elements and the adjacent h3 headers.
You can prevent this by simply adding the following CSS rule:
.collapse div {
overflow: auto;
}
See demo: https://jsfiddle.net/vauxjg7r/

Fiddle demo here.
Try to add this CSS style:
.collapse p {
margin: 0px;
}
But if you want to keep the space above, you can do:
.collapse p {
margin: 0px;
padding: 10px 0 0;
}
The issue was caused by browser-applied styles, you need to overwrite them with codes like above. Or, you could use CSS resets to normalize browser styles.

It's the margin from the paragraphs. You must overwrite the user agent stylesheet by adding this to your stylesheet:
p {
margin: 0;
padding: .5em 0;
}

This is due to margin collapsing on the p elements.
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block with the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
with the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
(https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)
To stop this effect from happening add overflow: hidden; to .collapse > h3 + div.
(function($) {
$.fn.collapse = function(method, options) {
var settings = $.extend({
collapse: "collapse",
signTag: "<span></span>",
titles: "h3",
titlesChild: "span",
container: "div",
classOpen: "opened",
open: "+",
close: "−",
rlOpen: "rl-open",
rlClose: "rl-close"
}, options);
var $element = $(this).children(settings.titles);
var $symbols = $(settings.signTag);
var $signOpen = $symbols.html(settings.open);
var $signClose = $symbols.html(settings.close);
var $insertElement = $symbols.appendTo($element);
$element.parent().addClass(settings.collapse);
if ($element.next().hasClass(settings.classOpen)) {
$element.children().html(settings.close).addClass(settings.rlClose);
} else {
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods = {
single: function() {
return this.each(function() {
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
.prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
$element.on('click', function() {
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)) {
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
} else {
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.collapse ');
}
};
})(jQuery);
$(function() {
$("#collapse").collapse('single', {});
});
#wrapper {
margin: 0 auto;
position: relative;
max-width: 640px;
}
.collapse > h3 {
background-color: #007197;
color: #fff;
margin: 0 auto;
padding: 3%;
text-decoration: none;
}
.collapse > h3 > span {
float: right;
}
.collapse > h3 + div {
display: none;
margin: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<main class="main-wrapper">
<div id="collapse">
<h3 style="background:black;">One</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:red;">Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:orange;">Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:blue;">Four</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:green;">Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div>
</main>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Javascript Auto-scroll Appears Jittery on Safari IOS - javascript

Related

How to hide other div apart from touched div to the band

Map cant be scrolled in iOS safari sometimes

div opacity on scroll top

"ion-scroll" - not able to scroll vertically

Floating background when collapse a div

Categories

Resources