How Can I Get Horizontal Scrollbars At Top And Bottom Of A Div

If you're looking to add horizontal scrollbars both at the top and bottom of a div on your website, you've come to the right place. This feature can be really handy when dealing with long content that needs to be scrolled horizontally. So, let's dive in and see how you can achieve this using a few simple CSS tricks.

Firstly, you'll need to create a div element in your HTML file that contains the content you want to have scrollable horizontally. For example, you could have a div with a class name of "scrollable-div" in your markup.

Next, in your CSS file or style section, you can target this specific div using its class name "scrollable-div". To add horizontal scrollbars at the top and bottom of the div, you can use the following CSS properties:

.scrollable-div {
  display: block;
  width: 100%; /* Set the width of the div */
  overflow-x: scroll; /* Allow horizontal scrolling */
  overflow-y: hidden; /* Hide vertical scrollbar */
}

.scrollable-div::before,
.scrollable-div::after {
  content: ''; /* Create pseudo elements */
  position: absolute;
  height: 20px; /* Set the height of the scrollbars */
  width: 100%;
  background: transparent;
}

.scrollable-div::before {
  top: 0; /* Position at the top of the div */
  border-bottom: 1px solid #000; /* Style the top scrollbar */
}

.scrollable-div::after {
  bottom: 0; /* Position at the bottom of the div */
  border-top: 1px solid #000; /* Style the bottom scrollbar */
}

In the above CSS snippet, we are styling the "scrollable-div" class to allow horizontal scrolling using the `overflow-x: scroll` property. We then use pseudo-elements (`::before` and `::after`) to create the horizontal scrollbars at the top and bottom of the div.

Adjust the `height` value in the pseudo-elements to control the size of the scrollbars according to your design preferences. You can also customize the scrollbar appearance by changing the background color or borders in the pseudo-elements.

By following these simple CSS instructions, you can easily achieve horizontal scrollbars at the top and bottom of a div on your webpage. This can improve the user experience when dealing with lengthy horizontal content within a confined space.

So, go ahead and give it a try on your website to enhance the readability of your horizontal-scrolling elements. Experiment with different styles and settings to find the perfect look for your design. Happy coding!