如何实现无水平滚动条的jQuery横向滚动菜单？

嘿，我来帮你搞定这个问题！你目前的CSS方案已经能在Chrome、Safari这类WebKit内核浏览器里隐藏滚动条，但在Firefox、Edge这些浏览器里可能还会露出滚动条。下面我给你两种基于jQuery的解决方案，既能实现流畅的横向滚动，又能彻底把滚动条藏起来：

方案一：鼠标滚轮控制横向滚动（适合桌面端） #

这个方案会把鼠标的垂直滚动转换成横向滚动，同时通过CSS彻底隐藏滚动条，用户操作起来非常自然。

完整代码示例 #

CSS 调整

div.scrollmenu {
    background-color: #333;
    overflow: hidden; /* 把auto改成hidden，彻底藏起滚动条 */
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

jQuery 代码

$(document).ready(function() {
    // 监听滚动菜单的鼠标滚轮事件
    $('.scrollmenu').on('wheel', function(e) {
        e.preventDefault(); // 阻止默认的上下滚动
        // 把滚轮的垂直偏移转换成横向滚动的距离
        $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY);
    });
});

HTML 部分（和你原来的一样就行）

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  <a href="#about">About</a>
  ...
</div>

方案二：添加左右按钮控制滚动（适合移动端或交互引导） #

如果希望用户通过明确的按钮来滚动（比如移动端用户不方便用滚轮），可以试试这个方案，滚动效果还带平滑动画：

完整代码示例 #

CSS 调整（新增按钮样式）

div.scrollmenu {
    background-color: #333;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}

/* 左右控制按钮的样式 */
.scroll-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 10;
}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

jQuery 代码

$(document).ready(function() {
    // 每次滚动的距离，你可以根据自己的需求调整
    const scrollStep = 200;

    // 左按钮点击事件，向左滚动
    $('.scroll-left').click(function() {
        $('.scrollmenu').animate({
            scrollLeft: '-=' + scrollStep
        }, 300); // 300是动画时长，单位毫秒
    });

    // 右按钮点击事件，向右滚动
    $('.scroll-right').click(function() {
        $('.scrollmenu').animate({
            scrollLeft: '+=' + scrollStep
        }, 300);
    });
});

HTML 部分（要加个容器和按钮）

<div class="scrollmenu-container">
  <button class="scroll-control scroll-left">&lt;</button>
  <div class="scrollmenu">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    <a href="#about">About</a>
    ...
  </div>
  <button class="scroll-control scroll-right">&gt;</button>
</div>

额外小技巧：不用jQuery也能跨浏览器藏滚动条 #

如果你只是想保留原生的滚动功能（比如拖拽滚动、键盘方向键），只是单纯隐藏滚动条，那其实不用jQuery，加几行CSS就能搞定所有现代浏览器：

/* 隐藏WebKit（Chrome/Safari）的滚动条 */
.scrollmenu::-webkit-scrollbar {
    display: none;
}
/* 隐藏Firefox的滚动条 */
.scrollmenu {
    scrollbar-width: none;
}
/* 隐藏IE/Edge的滚动条 */
.scrollmenu {
    -ms-overflow-style: none;
}

这样改完，滚动条彻底消失，但原生的滚动功能完全保留，非常省心！

内容的提问来源于stack exchange，提问作者joe