Html 如何使我的滚动条不可见，但在桌面上工作？

我有一个问题，我正在尝试将一个smiple模型集成到html/css/js中，我从mobile开始，大家都知道，mobile中的滚动条很轻，没有那么难看，但是桌面（浏览器）上的滚动条太难看了，我想删除它，但我想要滚动效果，我将首先用图片说明我拥有什么以及我想要实现什么，以下是我想要的：

我可以用手指（在手机上）滚动，用鼠标在桌面上滚动，但这里是我在桌面上的：

在手机上也不错，因为它有一个很好的滚动条：

所以在桌面上，我试图隐藏滚动条，将背景设置为透明，我希望它能工作，滚动条现在没有显示，而且滚动条也不能工作

这是我的html代码：（里面的链接是重复的，所以它是一个简单的代码）

.header{
位置：相对位置；
宽度：100%；
}
.上横梁{
宽度：100%；
填充：10px 10px 5px 10px；
背景色：#293847；
}
.标题\uuuu徽标-图标{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
边缘底部：15px；
}
.header__标志{
高度：20px；
最大宽度：250px；
}
.标题图标-容器a{
显示：内联块；
左边距：20px；
}
.标题图标-容器图像{
宽度：20px；
高度：20px；
}
.header\u选项{
显示器：flex；
宽度：100%；
溢出-x：滚动；
垫底：10px；
}
.标题\选项a{
右边距：20px；
位置：相对位置；
字体大小：14px；
文字装饰：无；
颜色：#ffffff；
字体系列：Arial，无衬线；
/*添加空白：nowrap*/
空白：nowrap；
}
.header\u选项--活动{
字体大小：粗体；
}
.header__选项--活动：：之后{
内容：''；
位置：绝对位置；
顶部：18px；
左：0px；
高度：3倍；
宽度：100%；
背景色：#e23a05；
显示：内联块；
}
.header\u选项a：最后一个子项{
右边距：0；
}
.标题\uuuu选项-详细信息{
显示器：flex；
利润率：10px；
溢出-x：滚动；
}
.header\uu选项：：-webkit滚动条，.header\uu选项-details:：-webkit滚动条{
/*背景：透明*/
}
.header__选项-详细信息-芯片{
填充：7px 20px 7px 20px；
边框：1px实心#d7d9e4；
边界半径：20px；
右边距：10px；
文字装饰：无；
颜色：#323232；
字体系列：Arial，无衬线；
字体大小：14px；
/*添加空白：nowrap*/
空白：nowrap；
}
.header__选项-details-chip:最后一个子项{
右边距：0；
}
.header__选项-details-chip--激活{
颜色：#e23a05；
}
/******************
**媒体查询**
******************/
@媒体屏幕和屏幕（最大宽度：600px）{
.header\uu选项：：-webkit滚动条，.header\uu选项-details:：-webkit滚动条{
显示：无；
}
}
@媒体屏幕和屏幕（最小宽度：599px）{
.上横梁{
填充：15px20px 5px20px；
}
.header__标志{
高度：35px；
最大宽度：350px；
}
.标题\uuuu选项-详细信息{
利润率：10px 20px；
}
.header__选项-详细信息-芯片{
右边距：20px；
}
.header\选项a、.header\选项-details-chip span{
字体大小：16px；
}
：-webkit滚动条{
高度：10px；
背景：透明；/*可选：仅使滚动条不可见*/
}
}

Ummm否，滚动条高度将添加到我的元素中，就像我添加的高度一样。你是说这个吗？

<div class="header">
    <div class="header__top-bar">
        <div class="header__logo-icons">
            <div class="header__icons-container">
                <a href="#">
                    <img src="assets/images/facebook.png" alt="facebook">
                </a>
                <a href="#">
                    <img src="assets/images/instagram.png" alt="facebook">
                </a>
                <a href="#">
                    <img src="assets/images/pinterest.png" alt="facebook">
                </a>
            </div>
        </div>
        <div class="header__options">
            <a href="#" onclick="showDetails(0)">
                Dernières Minutes
            </a>
            <a href="#" onclick="showDetails(1)">
                Vol
            </a>
            <a href="#" onclick="showDetails(2)">
                Séjour
            </a>
            <a href="#" onclick="showDetails(3)">
                Location
            </a>
            <a href="#" onclick="showDetails(4)">
                Camping
            </a>
            <a href="#" onclick="showDetails(5)">
                Hôtel
            </a>
            <a href="#" onclick="showDetails(6)">
                Train
            </a>
        </div>
    </div>
    <div class="header__option-details">
        <a href="#" onclick="activateOption(0)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(1)" class="header__option-details-chip">
            <span>Text two</span>
        </a>
        <a href="#" onclick="activateOption(2)"class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(3)" class="header__option-details-chip">
            <span>Text Okay</span>
        </a>
        <a href="#" onclick="activateOption(4)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(5)" class="header__option-details-chip">
            <span>Do this</span>
        </a>
        <a href="#" onclick="activateOption(6)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(7)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(8)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(9)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(10)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(11)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(12)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(13)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(14)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(15)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(16)" class="header__option-details-chip">
            <span>Text</span>
        </a>

        <a href="#" onclick="activateOption(17)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(18)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(19)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(20)" class="header__option-details-chip">
            <span>Text</span>
        </a>
        <a href="#" onclick="activateOption(21)" class="header__option-details-chip">
            <span>Text</span>
        </a>
    </div>
</div>

.header {
    position: relative;
    width: 100%;
}

.header__top-bar {
    width: 100%;
    padding: 10px 10px 5px 10px;
    background-color: #293847;

}

.header__logo-icons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.header__logo {
    height: 20px;
    max-width: 250px;
}

.header__icons-container a {
    display: inline-block;
    margin-left: 20px;
}

.header__icons-container img {
    width:20px;
    height: 20px;
}

.header__options {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 10px;
}


.header__options a {

    margin-right: 20px;
    position: relative;

    font-size: 14px;

    text-decoration: none;

    color: #ffffff;
    font-family: Arial, sans-serif;

    /* Add white-space: nowrap */
    white-space: nowrap;
}

.header__options--active {
    font-weight: bold;
}


.header__options--active::after {
    content:'';
    position: absolute; 
    top: 18px; 
    left: 0px; 
    height: 3px; 
    width: 100%; 
    background-color: #e23a05; 
    display: inline-block;
}

.header__options a:last-child {
    margin-right: 0;
}

.header__option-details {
    display: flex;
    margin: 10px;
    overflow-x: scroll;
}

.header__options::-webkit-scrollbar, .header__option-details::-webkit-scrollbar {
    /*background: transparent;*/
}

.header__option-details-chip {
    padding: 7px 20px 7px 20px;
    border: 1px solid #d7d9e4;
    border-radius: 20px;
    margin-right: 10px;
    text-decoration: none;
    color: #323232;
    font-family: Arial, sans-serif;

    font-size: 14px;
    /* Add white-space: nowrap */
    white-space: nowrap;
}


.header__option-details-chip:last-child {
    margin-right: 0;
}


.header__option-details-chip--active {
    color: #e23a05;
}

/******************
** Media queries **
******************/

@media screen and (max-width: 600px){
    .header__options::-webkit-scrollbar, .header__option-details::-webkit-scrollbar {
        display: none;
    }
}

@media screen and (min-width: 599px){
    .header__top-bar {
        padding: 15px 20px 5px 20px;
    }
    .header__logo {
        height: 35px;
        max-width: 350px;
    }

    .header__option-details {
        margin: 10px 20px;
    }

    .header__option-details-chip {
        margin-right: 20px;
    }

    .header__options a, .header__option-details-chip span {
        font-size: 16px;
    }

}