Stop Scrolling Past last Div on mobile device

Question

Just to warn you I am creating my website with little experience so my code is very messy (lots of code from trying things out and I don't erase).

My site works when on a Desktop but when I try scrolling on my Ipad I go past the page.

I would like it to stop scrolling once it reaches the end of the last Div.

Here is Screenshot: http://chrisandlisa.com/Images/errorScreenShot.jpeg

My Website: http://chrisandlisa.com

My CSS file is starting to get huge but here is the Code:

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'alice_in_wonderlandregular';
    src: url('font/alice_in_wonderland_3-webfont.woff2') format('woff2'),
         url('font/alice_in_wonderland_3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
        background: transparent;
    }

body, html {
}

header {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.object-fit_contain { 
    object-fit: contain;
    object-position: center top;
}



  /* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 1px;
    perspective: 1px;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
  }


  /* demo styles
  --------------------------------------------- */

  body {
    font-family: 'alice_in_wonderlandregular', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    text-align: left;  
    font-size: 100%;
  }

  .parallax {
    font-size: 200%;
  }

   /* add some padding to force scrollbars */
  .parallax__layer {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    margin: 0;
    padding-bottom: 0;
  }
  
.bg1 {
    background: url("Images/backgroundcopy.jpg");
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: repeat-y;
}
#parallax1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: opacity 0.1s;
    
}

#parallax2 {
}
.front{
    opacity: 1;
}
.middle{
    opacity: 0;
}
.bottomPadding{
    
}
.banner1 {
    float: none;
    width: 869px;
    display: block;
    margin: 0 auto 0 auto;
    padding-top: 10px;
}
.content1 {
    float: none;
    width: 300px;
    display: block;
    margin: 0 auto 0 auto;
    padding-top: 10px;
}

.y-mandatory {
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
    overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
}

.y-proximity {
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
    overflow-scrolling: touch;
    scroll-snap-type: y proximity;
}

.y-scroll-snap-start{
        scroll-snap-align: start;
        scroll-snap-stop: normal;
}
.no-support {
  text-align: center;
}

@supports(scroll-snap-type: y mandatory) {
  .no-support {
    display: none;
  }
}


img[class] { 
  width: 100%;
}

a
{
  text-decoration: none;
  color: #FFFFFF;
  
  transition: color 0.3s ease;
}

a:hover
{
  color: #D9B374;
}

#menuToggle
{
  display: block;
  position: absolute;
  top: 50px;
  right: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #000000;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #FFFFFF;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  right: -100px;
  
  background: #20191A;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 30px;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
  opacity: 1;
}

#googleIframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 200px;
}

@media screen and (max-width: 843px) {
    #menu {
        transform: none;
        opacity: 0;

        transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    
    .banner1 {
        float: left;
        width: 100%;
        display: block;
        margin: 0 30px 20px 0;
        padding-top: 45px;
        padding-bottom: 600px;
  
        &:nth-child(2n) {
            clear: left;
        }
  
        &:nth-child(2n+1){
            margin-right: 0;
        }
        
        
    }
    
    .content1 {
        float: none;
        width: 60%;
        display: block;
        margin: 0 auto 0 auto;
        padding-top: 45px;
  
        &:nth-child(2n) {
            clear: left;
        }
  
        &:nth-child(2n+1){
            margin-right: 0;
        }
    }
    
    h1{
        font-size: .8em;
    }

    h2{
        font-size: .5em;
    }
    #googleIframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 280px;
        height: 200px;
    }
}

@media screen and (orientation: landscape) and (min-height: 1024px) and (min-width: 866px){
    .banner1 {
        float: none;
        width: 869px;
        display: block;
        margin: 0 auto 0 auto;
        padding-top: 10px;
    }
    .content1 {
        float: none;
        width: 600px;
        display: block;
        margin: 0 auto 0 auto;
        padding-top: 10px;
    }
    
    h1{
        font-size: 1.2em;
    }

    h2{
        font-size: 1em;
    }
    
    #googleIframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 600px;
        height: 400px;
    }
}

@media screen and (orientation: landscape) and (max-height: 1023px) and (min-width: 866px){
    .banner1 {
        float: none;
        width: 550px;
        display: block;
        margin: 0 auto 0 auto;
        padding-top: 10px;
    }
    .content1 {
        float: none;
        width: 250px;
        height: auto;
        display: block;
        margin: 0 auto 0 auto;
        padding-top: 10px;
    }
    
    h1{
        font-size: 2em;
    }

    h2{
        font-size: 3em;
    }
    
    #googleIframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 250px;
        height: 200px;
    }
}

h1, h2 {
    font-family: 'alice_in_wonderlandregular', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    text-align: center;
}
h1{
    font-size: 1em;
}

h2{
    font-size: .8em;
}

Here is my html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chris and Lisa's Wedding</title>
        <link href="ChrisAndLisaWedding.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    
    <header id="header">
        <nav role="navigation">
                  <div id="menuToggle">
                    <!--
                    A fake / hidden checkbox is used as click reciever,
                    so you can use the :checked selector on it.
                    -->
                    <input type="checkbox" />
    
                    <!--
                    Some spans to act as a hamburger.
    
                    They are acting like a real hamburger,
                    not that McDonalds stuff.
                    -->
                      <span></span>
                      <span></span>
                      <span></span>
                    <!--
                    Too bad the menu has to be inside of the button
                    but hey, it's pure CSS magic.
                    -->
                    <ul id="menu">
                        <a href="#parallax1"><li>Home</li></a>   
                        <a href="#"><li>About</li></a>
                        <a href="#"><li>Info</li></a>
                        <a href="#"><li>Contact</li></a>
                    </ul>
                  </div>
                </nav>  
    </header>
    
    <body>      
        <div class="parallax">
          <div class="parallax__layer parallax__layer--back bg1 object-fit_contain" id="parallax2">
                
            </div>
            <div class="parallax__layer parallax__layer--base" id="parallax1">
              
                <!--
                Content goes here
                -->
                
              <div class="banner1 y-scroll-snap-start front">
                    <img class="object-fit_contain" src="Images/top-page.png" alt=""/>
                </div>
                
                <div class="content1 y-scroll-snap-start middle">
                    
                    <h1>Wedding Location<br><br></h1>
                    
                    
                    <img class="object-fit_contain" src="Images/Scovill-Pavilionweb.jpg" alt=""/>
                    
                  <h2> &nbsp;<br>
                      SCOVILL ZOO GAZEBO<br>
                      71 S. COUNTRY CLUB RD.<br>
                      DECATUR, IL 62521<br>
                      2:30pm<br>
  <br>
                      Standing room only </h2>
                  <iframe id="googleIframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3064.1540705731177!2d-88.91550038409686!3d39.825963199278696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8874af9ec8b29ee1%3A0xd07a3a5a6ba86588!2s71%20S%20Country%20Club%20Rd%2C%20Decatur%2C%20IL%2062521!5e0!3m2!1sen!2sus!4v1618455859789!5m2!1sen!2sus" style="border:0;" allowfullscreen="true" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        var offsetHeightParallax = document.getElementById('parallax1').scrollHeight;
        
        document.getElementById("parallax2").style.height = offsetHeightParallax+"px";
        
        //document.querySelector(".bottomPadding").style.paddingBottom = (offsetHeightParallax/4) + "px";
        
        function sizeChanged(){
            var offsetHeightParallax = document.getElementById('parallax1').scrollHeight;
            document.getElementById("parallax2").style.height = offsetHeightParallax+"px";
            //document.querySelector(".bottomPadding").style.paddingBottom = (offsetHeightParallax/4) + "px";
            console.log("Height of page: "+offsetHeightParallax+"px");
        }
        
        function orientationChanged(){
            var offsetHeightParallax = document.getElementById('parallax1').scrollHeight;
            document.getElementById("parallax2").style.height = offsetHeightParallax+"px";
            //document.querySelector(".bottomPadding").style.paddingBottom = (offsetHeightParallax/4) + "px";
        }
        
        window.addEventListener('resize', sizeChanged);
        window.addEventListener('orientationchange', orientationChanged);
        
        console.log("Height of page: "+offsetHeightParallax+"px");
        
        
        (function () {
        $('menu').css('display', 'block');
        // or $('#id_of_your_sidebar').show();
        });
        
        const checkpoint = 700;

        document.querySelector('.parallax').addEventListener('scroll', changeOpacity);
        
        function changeOpacity(){
            
            const currentScroll = document.querySelector('.parallax').scrollTop;
            
            if (currentScroll <= checkpoint) {
                opacity = 1 - currentScroll / checkpoint;
                opacity2 = currentScroll / checkpoint;
            } 
            else {
                opacity = 0;
                opacity2 = 1;
            }
            
            document.querySelector(".front").style.opacity = opacity;
            document.querySelector(".middle").style.opacity = opacity2;
            
        }
        
    </script>
</html>

I appreciate any help I can get.

Thank you

Answer 1

I think your issue is that on the different screen size of the ipad you are seeing an area where your background image doesen't cover.

If you change your css code for .bg1 from background-size: contain; to background-size: cover; it might fix the white gap at the bottom of the page.

Answer 2

I never could find an answer as to why it was scrolling past the content because it only happened in iOS.

I did find out that document.element.clientHeight and window.innerHeight returned inconsistent values after the initial load when you changed the orientation of your mobile iOS device. So that would also break content. The only thing that was consistent was screen.height and screen.width which gave you the size of your whole screen and wouldn't change on orientation change. You can try this by going to any "whats my viewport" sites on a iOS device.

I wrote a couple functions that is a work around. I will warn you they are sloppy and I still need to clean them up but they work

First I redid my sizeChanged() function:

//returns new height of page
        function sizeChanged(){
            //if viewport size <= last <div> size
            if(window.innerHeight <= document.querySelector('#thankYouPage').scrollHeight){
                //Content Height
                var offsetHeightParallax = document.querySelector('#parallax1').scrollHeight;
            }
            
            else{           
                //if content >= viewport
                if(document.querySelector('#parallax1').scrollHeight >= window.innerHeight){
                    
                    //Height difference = viewport - last <div> size
                    var heightDiffContent = window.innerHeight - document.querySelector('#thankYouPage').scrollHeight;
                    
                    //Height = height difference + content
                    var offsetHeightParallax = heightDiffContent + document.querySelector('#parallax1').scrollHeight;
                }
                //else height = viewport
                else{
                    var offsetHeightParallax = window.innerHeight;
                }
            }
            
            //return new height of page
            return offsetHeightParallax;
        }

I shamelessly stole this code off of another stack overflow post used to detect iOS devices

//##############################################
//Detect iOS returns true or false
//##############################################
function iOS() {
            return [
                'iPad Simulator',
                'iPhone Simulator',
                'iPod Simulator',
                'iPad',
                'iPhone',
                'iPod'
            ].includes(navigator.platform)
                // iPad on iOS 13 detection
                || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
        }

I then wrote a function to be used on the event listener

function sizeChangedListener(){
            
            //bug with IOS prevents getting correct viewport work around is refresh page
            if(iOS()){
                window.location.reload(false);
            }
            
            var endOfPage = sizeChanged();

            document.getElementById("parallax2").style.height = endOfPage+"px";
        }

window.addEventListener('resize', sizeChangedListener);

Last thing, I wrote a function that prevented going past the content.

function stopScrolling(){
                    
            var currentScrollEnd = (document.querySelector('.parallax').scrollTop + window.innerHeight);        
            var endOfPage = sizeChanged();
            
            //if bottom of viewport reaches end of page don't let it scroll beyond the end
            if(currentScrollEnd >= endOfPage){
                //You need top of viewport in order to reset
                var currentViewportTopPos = endOfPage - window.innerHeight;
                //reset scroll position as to prevent scrolling past content
                document.querySelector('.parallax').scrollTo(0,currentViewportTopPos);
            }
        }

document.querySelector('.parallax').addEventListener('scroll', stopScrolling);

This is my less elegant solution to my problem but once again it works.