Implementing Custom Scroll Buttons in Bootstrap Modal Content

Trying to figure out how to create custom scroll up and down buttons for a Bootstrap 4 modal without the scrollbar that was hidden with CSS. I want to provide an easy scrolling option especially for those who might find using the mouse confusing. Is there a way to achieve this with JavaScript?

I have added some CSS code for styling the modal body, but now looking for a solution to implement custom navigation buttons for scrolling.

[![See image attached for reference]

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c4dec5dec3">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5a405b405d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<button class="btn btn-primary mt-3 float-right" id="modal_view_left" data-toggle="modal" data-target="#get_quote_modal">Open modal</button>

<div class="modal modal_outer left_modal fade" id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
  <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <h2 class="modal-title">LEFT MODAL</h2>
        </div>
        
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p>
        </div>

        <div class="modal-footer">
          <button type="reset" class="btn btn-primary ml-auto" data-dismiss="modal">cancel</button>
        </div>

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

]1]1

https://i.sstatic.net/yn8F4.jpg

javascripthtmlcssbootstrap-4bootstrap-modal

Answer №1

Yes, it is absolutely possible to achieve this functionality. Below you will find the basic setup required to implement scrolling within a modal.

While the provided snippet does not include additional features like scroll increment on each click or specific styles, you can customize and add them according to your needs. To update the scroll value correctly, you must read the scrollTop property of your modal content and adjust it by your desired amount with each click event.

Explore more about JavaScript scrolling in the official documentation

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8b918a918c">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba0bba6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    
    
    
<button class="btn  btn-primary  mt-3 float-right" id="modal_view_left" data-toggle="modal"  data-target="#get_quote_modal">Open modal</button>


<div class="modal modal_outer left_modal fade" id="get_quote_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
  <button id="scrollDown">v</button>
  <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <h2 class="modal-title">LEFT MODAL</h2>
        </div>
        
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p><br><br>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni numquam accusantium dolore ipsum! Aut distinctio maxime obcaecati, sapiente nisi laudantium dignissimos optio, ea ex quas laboriosam ab officia odit, sequi.</p>
        </div>

        <div class="modal-footer">
          <button type="reset" class="btn btn-primary ml-auto" data-dismiss="modal">cancel</button>
        </div>

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

<script>
let btn = document.getElementById('scrollDown');
let elem = document.getElementsByClassName('modal-body'); // returns array

btn.onclick = function(e) {
    elem[0].scroll(0, 1000); // scrolls inside modal body
};
</script>

Additional Script:

    let btn = document.getElementById('scrollDown');
    let elem = document.getElementsByClassName('modal-body'); // returns array - you can use ID instead

    btn.onclick = function(e) {
        // if you set an id on the modal body, you do not need elem[0], just elem
        elem[0].scroll(0, 1000); // scrolls inside modal body
    };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top Strategies for PHP - Managing Directs and Header Content

PHP is a versatile language frequently used for generating 'templates' like headers to maintain a consistent look across websites and simplify updates via require or include commands. Another common task involves managing log-ins and redirecting ...

javascriptphphttp-redirect

"The utilization of either Threejs ArrowHelper or Line with an outlined design

Is there a way to outline an arrow or line using the ArrowHelper or Line geometries within the Three.js framework? While trying to achieve this, I encountered the issue that outlining a complex object or a line is not as straightforward as shown in this e ...

javascriptthree.jslineoutline

Eliminate invisible characters like ZERO WIDTH SPACE (unicode 8203) from a JavaScript string

As I work on my JavaScript code to process website content, I've come across a frustrating issue with the SharePoint text editor. It has a tendency to insert a "zero width space" character (Unicode value 8203 or B200 in hexadecimal) when the user hits ...

javascriptregexunicode

Is it possible to eliminate the input border within React-Bootstrap?

Struggling to remove the input borders of the Form.Control component in React-Bootstrap. Despite searching for answers, nothing has been able to solve this issue. I've attempted redefining the .css classes "input" and "form-control", trying to set th ...

htmlcssbootstrap-4react-bootstrap

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

I manage a complex and expansive website that contains a significant amount of repetitive HTML elements such as the navigation menu and top ribbon. Loading a single page on my site can be resource-intensive, with up to 300KB of data required, half of whic ...

javascriptjqueryhtmlajaxcaching

Tips for identifying modifications in an input text field and activating the save button

Currently, I am developing a function that can detect any changes made in the text field and then activate the save button accordingly. This code is being executed in Visual Studio 2017, using HTML and JavaScript. (function () { var customer_addres ...

javascriptjqueryhtmljson

Having trouble getting my Bootstrap 4 date-time picker to work on Internet Explorer. Are there any alternatives that are compatible with Bootstrap 4.0?

I am facing an issue where the Date-Time picker in Bootstrap-4 is not functioning properly on Internet Explorer. Can anyone advise me on how to resolve this problem? I have utilized Bootstrap-4 for my entire project. ...

datepickerbootstrap-4timepicker

Unraveling deeply nested array objects in JSON with Java Script/jQuery

I need help working with a JSON file that looks like the following: {[ {"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}, {"Folder":[ {"name":"John"}, {"name":"Anna"}, {"Folder":[ {"name":"gg"}, ...

javascriptjqueryjson

"Converting a standard grammar with recursion and alternations into a regular expression: A step-by-step

A grammar is considered regular if it follows either a right-linear or left-linear pattern. According to this tutorial, this type of grammar possesses a unique property: Regular grammars have a special characteristic: through the substitution of every no ...

javascriptecmascript-nextcompiler-construction

Encountering issues while running the npm build command due to exporting async functions in React

In my React project, I am utilizing async functions and have created a file named apiRequest.js structured like this: const axios = require('axios'); const serverURL = "http://localhost:8080" getInfo = async function ({email}) { try { r ...

javascriptreactjsnpmasync-awaites6-promise

What is the way to instruct Mongoose to exclude a field from being saved?

Is there a way in Mongoose to instruct it to not save the age field if it's null or undefined? Or is there a method to achieve this in Express? Express router.put('/edit/:id', function(req, res) { Person.findOneAndUpdate({ _id: req.p ...

javascriptmongodbexpressmongoose

Retrieve the URL of the image from an XML document

Figuring out how to extract the image URL from XML files in Android Studio can be challenging. After analyzing 30 RSS Feed XMLs, I discovered that 95% of them contain ".jpg" images with links starting with "http," not "www." Therefore, I am working on a co ...

javascriptxmlandroid-studiorssfeed

Vue Websockets twofold

I am experiencing some issues with Laravel/Echo websockets and Vue.js integration. I have set up everything as required, and it works, but not quite as expected. The problem arises when I refresh the page and send a request - it displays fine. However, if ...

javascriptphpvue.jswebsocket

Steps for filling a dropdown menu in Bootstrap with data from a SQL database

Can someone please assist me in populating a dropdown list in bootstrap with values from an SQL table? I want to dynamically populate the dropdown list with values from the SQL table. Below is a snippet of my HTML code: <div class="dropdown"&g ...

c#bootstrap-4bootstrap-modalangular-ui-bootstrap

How to input a file in a form using React

I am trying to use an API to upload a file, but my formData() function is not returning anything. var formData = new FormData(); data.append("file", file[0]); const options = { method: 'POST', headers: {...}, body: formData } fet ...

javascriptreactjsformsapifile

Encountering a data property error while trying to render ejs using axios

I am encountering an error message "TypeError: Cannot read property 'data' of undefined" when trying to display results.ejs using data from an API. Can someone help me identify what's incorrect with the rendering code? Thank you. index.js: ...

javascriptnode.jsexpressaxios

Create a customizable JavaScript clock that synchronizes with an image to display the current hour, minute

I am having trouble with my clock not working I have created images for the hour, minute, second, and AM/PM https://i.sstatic.net/4zg00.png I attempted to use this code: <script language="JavaScript1.1"> <!-- /* Live image clock III Written b ...

javascriptimageclock

Angular app encounters issue with Firebase definition post Firebase migration

Hey there, I'm currently facing an issue while trying to fetch data from my Firebase database using Angular. The error message 'firebase is not defined' keeps appearing. var config = { databaseURL: 'https://console.firebase.google. ...

javascripthtmlangularjsfirebase

Issue with wrapper not aligning correctly at the top of the screen

I keep noticing a gap between my wrapper and the top of the page. Despite trying multiple solutions, none seem to work for me. The background image covers the entire background and is aligned at the top perfectly, but the wrapper with its own background a ...

htmlcsstwitter-bootstrap

Converting MS Access databases

My latest project involves the conversion of an existing MS Access 2007 application into a web-based application. Currently, all data is stored in a SQL Server 2005 database. Given my limited web development experience, I am approaching this task with caut ...

jqueryhtmlweb-servicesms-accessreporting-services