Hide scroll and implement it with JS

Solution 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>

Solution 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>