How to Add Scroll Functionality to Your Dropdowns
If you have a number of options in a select dropdown, it can be burdensome and push the options off the viewport. You can, however, add scroll options to allow users the intuitive ability to see more options.
From a usability perspective, it's recommended that the dropdown menu item numbers should not be more than seven items. A higher number of items will make finding and selecting the desired menu item difficult. However, there are times when you have no choice but to use a lot of menu selection items in dropdown menus for example, when you need to display different countries or languages for people to select. In those cases, using a scroll function in the dropdown menu is needed. In this tutorial, we'll show you how to build a scrollable dropdown menu.
Getting Started
In this tutorial, we'll be using the Slick Slider by Ken Wheeler for the scrolling functionality and FontAwesome for the dropdown arrow icons. Before we get to building the HTML structure for the dropdown menu, we first need to add all the necessary external files in the head section of your HTML file:
HTML
The HTML is pretty straightforward with a div element containing all the dropdown list items inside an a tag. The important elements to pay attention here is the .up and down classnames next to the .dropdown-item classes. We'll be selecting these classes in the Javascript code to move the dropdown carousel up and down to see list items.
CSS
Once we build the HTML structure of the dropdown menu, we have add some CSS rules to adjust the height of the dropdown menu, control the overflow and position the up and down arrows as well as adding the right padding and margins. Feel free to change the text and background colors as you wish in your project:
Javascript
Copy and paste the Javascript code below in your project. You can either put the code inside the script tags in your HTML file or create a separate JS file and link to it from your HTML file. The first function we need to put is the event.stopPropagation() function which stops the bubbling of the event to parent elements, preventing any parent elements from being notified of and executing the event.
After that, we use the standard Slick Slider code and adjust it vertically so that the slider items or the list items appear in vertical order rather than a horizontal order. In the prevArrow and nextArrow options, the arrow links that make the dropdown menu slide up and down are targeted along with their classnames, .up and .down, respectively. Feel free to customize the number of slides to show depending on the number of your list items:
And there is is. Check out the JSFiddle below to see how the dropdown menu functions before committing to its use:
Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
