Hide scroll and implement it with JS

Question

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/

Answer 1

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>

Answer 2

This should work by using element.scrollBy.

The scrollBy() method of the Element interface scrolls an element by the given amount.

Also, you should set overflow-x to hidden instead of auto. overflow:auto will assign scrollbar to it

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

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);
}

let left = document.querySelector('#left')
let right = document.querySelector('#right')

left.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(-20,0);
});
right.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(20,0);
});

#outer_container{
    margin: auto;
}

#tabs_container{
    display: flex;
    overflow-x: hidden;
   
    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>
            <button id='left'>Left </button>
            <button id='right'>Right</button>
                    <i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
            </div>
        </td>
        </tr>
    </table>    
</div>