隱藏滾動并用JS實作-有解無憂

我是 HTML 和 JavaScript 的初學者。

我正在構建一個標簽欄，我希望在其中可以選擇水平滾動它，而不是使用傳統的瀏覽器滾動，而是使用我創建的箭頭按鈕。

這是我的標簽欄的樣子：隱藏滾動并用JS實作

這是我能做到的最好的：

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>

我設法轉到 JavaScript 函式，但不知道如何通過 JS 代碼水平滾動。我還想隱藏 OOTB 滾動條。

我還創建了一個小提琴：https ://jsfiddle.net/b40c19h6/1/

uj5u.com熱心網友回復：

用于overflow-x: hidden隱藏滾動條，您可以使用選項卡元素上的scrollLeft或scrollBy功能來移動內容。

在這里你可以怎么做：

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>

uj5u.com熱心網友回復：

這應該通過使用element.scrollBy.

Element 介面的 scrollBy() 方法將元素滾動給定的量。

此外，您應該設定overflow-x為 hidden 而不是auto. overflow:auto將為其分配滾動條

overflow-x CSS 屬性設定內容溢位塊級元素的左右邊緣時顯示的內容。這可能什么都不是，滾動條或溢位內容。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412992.html

標籤：

上一篇：為React Typescript的clsx創建樣式規則

下一篇：javascript結果后如何移動閃爍的元素？