Add Top And Bottom Horizontal Scrollbar On Any DIV Using Pure Vanilla JavaScript

Sometimes we need to add a scroll bar to a div or span whenever text in the div or span gets overflow. the scroll bar is supported in all browsers like IE 5+, FF 3.5+, and Safari, Opera, etc. To show the scroll bar, we need to specify the overflow property of CSS to “visible” or “auto”.

Now there are many snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now check out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Why You Need Double Horizontal Scrollbar?

Sometime when you have lengthy data in any DIV like for example you have data in your DIV as Table that have too many columns that it will overflow from your view screen then you will just have to add scrollbar and that will be by default at the bottom. You can not make it responsive until to break your table one row in multiple rows that will mess up your table data so you cant do this.

Rest now when you have vertically lengthy data also along with horizontally lengthy data then you have to make it easy to read for your user like if the user wants to go ahead along with horizontal access then he must have to scroll down then scroll right or left so to avoid this you can make it easy for your user by adding a scroll bar at the top of DIV to save their time and give them easiness.

How You Can Add Simple Double Horizontal Scrollbar?

You nothing have to do anything extra with your current horizontally lengthy data DIV as this pure Vanilla JavaScript will do everything at its own. You just have to provide a DIV ID to this. Rest it will first measure the length of your that DIV then will add another DIV before it with the same width to show a scrollbar and then will map that scrollbar functionality with your main DIV scrollbar functionality in realtime so when you will move upper one, it will automatically move the below scrollbar and your data will scroll smoothly.

Copy the below code and add it before the end of the document means after that DIV where you want to add DoubleScrollbar.

/* Show Small Sidebar Menu On Hover
---------------------------------------------- */
function DoubleScroll(element) {
var scrollbar= document.createElement('div');
scrollbar.appendChild(document.createElement('div'));
scrollbar.style.overflow = 'auto';
scrollbar.style.overflowY = 'hidden';
scrollbar.firstChild.style.height = '1px';
scrollbar.firstChild.style.width = element.scrollWidth+'px';
//scrollbar.firstChild.style.paddingTop= '1px';
scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
var running = false;
scrollbar.onscroll= function() {
if(running) {
running = false;
return;
}
running = true;
element.scrollLeft= scrollbar.scrollLeft;
};
element.onscroll= function() {
if(running) {
running = false;
return;
}
running = true;
scrollbar.scrollLeft= element.scrollLeft;
};
element.parentNode.insertBefore(scrollbar, element);
}
// DoubleScroll(document.getElementById('showTableData')); // Add Double Horizental Scroll To Any DIV After Filling Innver Content

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article…