How to Create a Scrollable Drawer in HTML and JavaScript

In this article, we will learn how to create a scrollable drawer using HTML and JavaScript. A scrollable drawer is a useful UI element that allows you to present additional content or options to your users while occupying minimal space on the screen. We will walk through the code snippet and provide a step-by-step explanation along with an example.

Code

<sl-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-scrolling');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>

Code Explanation

The provided code snippet demonstrates the implementation of a scrollable drawer using the component from the Shoelace UI framework. Let’s break down the code and understand how it works.

First, we define the structure of the drawer container with the element. It has a label attribute to specify the drawer’s label and a class attribute to assign a custom CSS class, in this case, “drawer-scrolling”. Within the , we have a

element that has a fixed height (150vh) and some styling properties such as a dashed border and padding. Inside the

, there is a

element that contains a message for the user.

Next, we have a element outside the which serves as the button to open the drawer. It has the text “Open Drawer” as its content.

Moving on to the JavaScript part, we have a script tag that contains our JavaScript code for interacting with the drawer. It starts by selecting the drawer element using document.querySelector('.drawer-scrolling'). We retrieve the drawer container by its custom CSS class.

Then, we get references to the open button and close button elements. The open button is obtained using drawer.nextElementSibling, which selects the next sibling element after the drawer container. The close button is found using drawer.querySelector('sl-button[variant="primary"]'), which selects the first element with the “variant” attribute set to “primary” inside the drawer container.

Finally, we attach event listeners to the openButton and closeButton elements. When the open button is clicked, the drawer.show() method is called to display the drawer. Similarly, when the close button is clicked, the drawer.hide() method is invoked to hide the drawer.

Example:

html
<sl-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

Open Drawer

Tags:javascript js