How to stop whole page scrolling while scrolling sub-elements? (JS)

I have made a pure JS slider just using the JS method "scrollIntoView". However, after I finished I found my whole page (window) scrolling. what is the problem and how can I fix this?

var Container  = document.getElementById("slider");
var units = document.getElementsByClassName("SlideContainer");
var slidesNo = (document.getElementsByClassName("SlideContainer").length - 1);
var i = 0;

(function () {
  setInterval(function(){
    units[i].scrollIntoView();
    i++;
    if(i > slidesNo) {
      i = 0;
    }
  }, 1000);
}());

#slider {
  height: 500px;
  width: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
  display: flex; /* displays items horizontally */
}

.SlideContainer{ 
  vertical-align: top;
  background-color: purple;
  color: white;
  height: 99% ;
  margin: .5% 0;
  min-width:33.3%; /* force the minimum width of items */
}

.img {
  overflow: hidden; 
  max-width:200px;
  max-height:200px;
  border-radius: 50%;
  display: block;
  margin: 10px auto 0 auto;
  text-align: center;
}
.img img{
  height: 200px;
  width: 200px;
}

.SlideContainer h1{
  text-align:center;
  border: solid 1px #fff;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div id="slider">
  
<div class="SlideContainer">
<div class="img">
<img src="https://www.nicepng.com/png/detail/11-112605_punk-cat-berkley-cats-illustrations.png">
</div>
  <h1>1</h1>
</div>
  
<div class="SlideContainer">
  <div class="img">
<img src="https://i.pinimg.com/736x/84/78/b9/8478b93283dc6eac074d437097a9fe74.jpg">  
  </div>
  <h1>2</h1>
</div>
  
<div class="SlideContainer">
<div class="img">
<img src="https://www.nicepng.com/png/detail/11-112605_punk-cat-berkley-cats-illustrations.png">
</div>
  <h1>3</h1>
</div>
      
<div class="SlideContainer">
<div class="img">
  <img src="https://pyxis.nymag.com/v1/imgs/424/858/e6c66c3a1992e711bca0137b754fea749f-cat-law.rsquare.w700.jpg"> 
</div>
  <h1>4</h1>
</div>
                  
<div class="SlideContainer">
  <div class="img">
<img src="https://i.pinimg.com/736x/84/78/b9/8478b93283dc6eac074d437097a9fe74.jpg">  
  </div>
  <h1>5</h1>
</div>
      
<div class="SlideContainer">
  <div class="img">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/07/a7/03/48/cutie-cats-cafe.jpg">
  </div>
  <h1>6</h1>
</div>
      
<div class="SlideContainer">
  <div class="img">
<img src="https://www.kindpng.com/picc/m/63-636557_cat-with-small-ears-kitten-with-transparent-background.png">
  </div>
  <h1>7</h1>
</div>
       
<div class="SlideContainer">
  <div class="img">
<img src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg">
  </div>
  <h1>8</h1>
</div>
      
<div class="SlideContainer">
  <div class="img">
<img src="https://i.pinimg.com/474x/04/dc/45/04dc45157a44679b3a2fd57e85e59af9.jpg">  
  </div>
  <h1>9</h1>
</div>
                  
<div class="SlideContainer">
  <div class="img">
<img src="https://www.zooplus.co.uk/magazine/wp-content/uploads/2018/03/hunting-cat-1024x682.jpg">
  </div>
  <h1>10</h1>
</div>
         
<div class="SlideContainer">
  <div class="img">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/07/a7/03/48/cutie-cats-cafe.jpg">
  </div>
  <h1>11</h1>
</div>
      
<div class="SlideContainer">
  <div class="img">
<img src="https://i.pinimg.com/736x/2b/47/18/2b4718827a37b6f11dc82e939984c571.jpg">
  </div>
  <h1>12</h1>
</div>
        
<div class="SlideContainer">
  <div class="img">
<img src="https://i.pinimg.com/474x/04/dc/45/04dc45157a44679b3a2fd57e85e59af9.jpg"> 
  </div>
  <h1>13</h1>
</div>
                  
<div class="SlideContainer">
  <div class="img">
<img src="https://www.zooplus.co.uk/magazine/wp-content/uploads/2018/03/hunting-cat-1024x682.jpg"> 
  </div>
  <h1>14</h1>
</div>
 
</div>

Is there any way to prevent the whole page from scrolling while using scrollIntoView for sub-elements or child elements?

source code

Recommended topics

Hot tags