I’m a beginner to HTML and JavaScript.
I’m building a tabs bar, in which I want to have the option to scroll it horizontally, not with a traditional browser scroll, but with arrow buttons that I’ve created.
Here is how my tabs bar looks like:
This is the best I’ve managed to do:
function clickLeft(){ arrowLeft.style.color="white"; setTimeout(function(){ arrowLeft.style.color="black"; },420); } function clickRight(){ arrowRight.style.color="white"; setTimeout(function(){ arrowRight.style.color="black"; },420); }
#outer_container{ margin: auto; } #tabs_container{ display: flex; overflow-x: auto; left: 0; right: 0; margin: auto; margin-top: 10px; width: 60vh; height: 70px; border: 2px solid black; border-bottom: 0; border-radius: 10px; padding: 4px; } #inner_wrap{ display: flex; border-bottom: 2px solid black; height: 50px; } #inner_wrap div{ text-align: center; background-color: gray; padding: 10px; height: 20px; border-radius: 5px; margin: 2px; width: max-content; } #tabs_container::-webkit-scrollbar{ width: 0; } #tabs_container::-webkit-scrollbar-track { margin-top: 20px; width: 20px; padding: 20px; -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0); border-radius: 10px; background-color: transparent; } #tabs_container::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3); background-color: #666666; } #icon_tab{ display: inline-block; background-color: none; border:0; color:white; float: right; width: 20px; margin:5px; } .arrow{ font-size: 34px; margin: 15px; transition: color 0.4s; }
<div id="main_container"> <table id=outer_container> <tr> <td> <div> <i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i> </div> </td>() <td> <div id="tabs_container"> <div id=inner_wrap> <div> geisha ch 1 </div> <div> geisha ch 2 </div> <div> geisha ch 3 </div> <div> work </div> <div> hobby </div> <div> music </div> <div> movie </div> <div> book1 </div> <div> book2 </div> <div> game </div> </div> <div id=icon_tab> <i class=" fa fa-plus-circle "aria-hidden="true"></i> </div> </div> </td> <td> <div> <i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i> </div> </td> </tr> </table> </div>
I manage to go to the JavaScript function, but have no idea how to scroll horizontally by JS code. Also I would like to hide the OOTB scroll.
I’ve also created a fiddle: https://jsfiddle.net/b40c19h6/1/
Advertisement
Answer
Use overflow-x: hidden
to hide the scrollbar and you can use the scrollLeft
or scrollBy
function on your tabs element to move the content.
Here how you can do it:
const arrowLeft = document.getElementsByClassName('arrow')[0]; const arrowRight = document.getElementsByClassName('arrow')[1]; const tabs = document.getElementById('tabs_container'); console.log("here") function clickLeft(){ arrowLeft.style.color="white"; setTimeout(function(){ arrowLeft.style.color="black"; },420); tabs.scrollLeft -= 30; } function clickRight(){ arrowRight.style.color="white"; setTimeout(function(){ arrowRight.style.color="black"; },420); tabs.scrollLeft += 30; }
body{ height:100vh; width:100%; margin: 0; } #main_container{ background-color: #3f51b5; height:100%; } #outer_container{ margin: auto; } #tabs_container{ display: flex; overflow-x: auto; left: 0; right: 0; margin: auto; margin-top: 10px; width: 60vh; height: 70px; border: 2px solid black; border-bottom: 0; border-radius: 10px; padding: 4px; } #inner_wrap{ display: flex; border-bottom: 2px solid black; height: 50px; } #inner_wrap div{ text-align: center; background-color: gray; padding: 10px; height: 20px; border-radius: 5px; margin: 2px; width: max-content; } #tabs_container{ overflow-x: hidden; } #tabs_container::-webkit-scrollbar{ width: 0; } #tabs_container::-webkit-scrollbar-track { margin-top: 20px; width: 20px; padding: 20px; -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0); border-radius: 10px; background-color: transparent; } #tabs_container::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3); background-color: #666666; } #icon_tab{ display: inline-block; background-color: none; border:0; color:white; float: right; width: 20px; margin:5px; } .arrow{ font-size: 34px; margin: 15px; transition: color 0.4s; }
<!DOCTYPE html> <html> <head> <title>vacabulary</title> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous"> </head> <body> <div id="main_container"> <table id=outer_container> <tr> <td> <div> <i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i> </div> </td>() <td> <div id="tabs_container"> <div id=inner_wrap> <div> geisha ch 1 </div> <div> geisha ch 2 </div> <div> geisha ch 3 </div> <div> work </div> <div> hobby </div> <div> music </div> <div> movie </div> <div> book1 </div> <div> book2 </div> <div> game </div> </div> <div id=icon_tab> <i class=" fa fa-plus-circle "aria-hidden="true"></i> </div> </div> </td> <td> <div> <i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i> </div> </td> </tr> </table> </div> <script src="main.js"></script> </body> </html>