Home > Software engineering >  How To Implement Smooth Vertical Continuous Scroll When Clicked A Button
How To Implement Smooth Vertical Continuous Scroll When Clicked A Button

Time：03-19

I'm using Bootstrap 4 Modal and I've hidden the Overflow-Y (ScrollBar) to improve my design but at the same time, I have made a function with two buttons (Up & Down) using javascript to make navigation easier for every user. But the problem is that they are not automatic scrollable means the user has to click again and again to navigate up and down which is not good.

That's why I want to implement a system like a browser's default Up & Down scroll button which makes continuous scroll when a user presses the button for a long time.

Please see my gif image for better understanding, and give me your feedback it will be very useful for me, Thanks.

                  var buttonDown = document.getElementById('btnDown');
                  var buttonUp = document.getElementById('btnUp');

                  buttonDown.onclick = function () {
                    document.getElementById('mo-body').scrollTop  = 40;
                  };
                  buttonUp.onclick = function () {
                    document.getElementById('mo-body').scrollTop -= 40;
                  };
.modal-body::-webkit-scrollbar {
    display: none;
}


.modal-body P {
  color: red;
}

.modal.left_modal .modal-dialog {
  position: fixed;
  margin: auto;
  width: 450px;
  max-width: 85%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
      -ms-transform: translate3d(0%, 0, 0);
       -o-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
}

.modal.left_modal .modal-content {
  height: 100vh !important;
}

.modal.left_modal.fade .modal-dialog{
  left: -50%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left_modal.fade.show .modal-dialog{
  left: 0;
  box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}

.modal_outer .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    
    
    
<button  id="modal_view_left" data-toggle="modal"  data-target="#get_quote_modal">Open modal</button>



<div  id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
  <div  role="document">
      <div >

        <div >
          <h2 >LEFT MODAL</h2>
        </div>
        
        <div  id="mo-body">
          <div >
            <div >
               <div  style="border: 3px solid red; border-radius: 15px;">
                  <div >
                     <h3 >Sports Package</h3>
                        <hr >
                        <span >
                          <ul >
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                         </ul>
                        </span>
                        <hr >
                     <h3 >₹4,999/-</h3>
                  </div>
               </div>
            </div>
            <div >
               <div  style="border: 3px solid red; border-radius: 15px;">
                  <div >
                     <h3 >Library Package</h3>
                        <hr >
                        <span >
                           <ul >
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                           </ul>
                        </span>
                        <hr >
                     <h3 >₹9,999/-</h3>
                  </div>
               </div>
            </div>
            <div >
               <div  style="border: 3px solid red; border-radius: 15px;">
                  <div >
                     <h3 >Hostel Package</h3>
                        <hr >
                        <span >
                          <ul >
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                         </ul>
                        </span>
                        <hr >
                     <h3 >₹1,499/-</h3>
                  </div>
               </div>
            </div>  
         </div>
        </div>

        <div >
          <button id="btnDown" type="button" value="Down" >Down</button>
          <button id="btnUp" type="button" value="Up" >Up</button>
        </div>

      </div>
  </div>
</div>

][2]][2]

enter image description here

CodePudding user response：

Use this:

html {
    scroll-behavior: smooth;
}

CodePudding user response：

Maybe something like this.

var buttonDown = document.getElementById('btnDown');
                  var buttonUp = document.getElementById('btnUp');

                  buttonDown.onclick = function () {
                    document.getElementById('mo-body').scrollTop  = 40;
                      $("body, html").css("scroll-behavior", "smooth");
                  };
                  
                
                  
                  buttonUp.onclick = function () {
                    document.getElementById('mo-body').scrollTop -= 40;
                       $("body, html").css("scroll-behavior", "smooth")
                  };
.modal-body::-webkit-scrollbar {
    display: none;
}


.modal-body P {
  color: red;
}

.modal.left_modal .modal-dialog {
  position: fixed;
  margin: auto;
  width: 450px;
  max-width: 85%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
      -ms-transform: translate3d(0%, 0, 0);
       -o-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
}

.modal.left_modal .modal-content {
  height: 100vh !important;
}

.modal.left_modal.fade .modal-dialog{
  left: -50%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left_modal.fade.show .modal-dialog{
  left: 0;
  box-shadow: 0px 0px 19px rgba(0,0,0,.5);
}

.modal_outer .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    
    
    
<button  id="modal_view_left" data-toggle="modal"  data-target="#get_quote_modal">Open modal</button>



<div  id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
  <div  role="document">
      <div >

        <div >
          <h2 >LEFT MODAL</h2>
        </div>
        
        <div  id="mo-body">
          <div >
            <div >
               <div  style="border: 3px solid red; border-radius: 15px;">
                  <div >
                     <h3 >Sports Package</h3>
                        <hr >
                        <span >
                          <ul >
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                         </ul>
                        </span>
                        <hr >
                     <h3 >₹4,999/-</h3>
                  </div>
               </div>
            </div>
            <div >
               <div  style="border: 3px solid red; border-radius: 15px;">
                  <div >
                     <h3 >Library Package</h3>
                        <hr >
                        <span >
                           <ul >
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                              <li><i ></i> Lorem ipsum dolor sit amet</li>
                           </ul>
                        </span>
                        <hr >
                     <h3 >₹9,999/-</h3>
                  </div>
               </div>
            </div>
            <div >
               <div  style="border: 3px solid red; border-radius: 15px;">
                  <div >
                     <h3 >Hostel Package</h3>
                        <hr >
                        <span >
                          <ul >
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                            <li><i ></i> Lorem ipsum dolor sit amet</li>
                         </ul>
                        </span>
                        <hr >
                     <h3 >₹1,499/-</h3>
                  </div>
               </div>
            </div>  
         </div>
        </div>

        <div >
          <button id="btnDown" type="button" value="Down" >Down</button>
          <button id="btnUp" type="button" value="Up" >Up</button>
        </div>

      </div>
  </div>
</div>

Page link：https//www.codepudding.com/Softwareengineering/340777.html

Prev:How can I slide this React drawer from left to right
Next:SQL Server Hierarchy Rank Display
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding