js横向滚动菜单

基础概念

JavaScript 横向滚动菜单是一种常见的网页布局元素，它允许用户在水平方向上滚动查看菜单项。这种菜单通常用于展示大量导航选项，尤其是在空间有限的情况下。

类型

基于鼠标滚轮：用户可以通过鼠标滚轮左右滚动菜单。
基于触摸滑动：在移动设备上，用户可以通过手指滑动来滚动菜单。
基于按钮控制：通过左右箭头按钮来控制菜单的滚动。

应用场景

电商网站：展示大量产品类别。
新闻网站：快速切换不同新闻板块。
导航系统：复杂的应用或游戏导航。

示例代码

以下是一个简单的基于 JavaScript 和 CSS 的横向滚动菜单实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scroll Menu</title>
<style>
  .scroll-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .scroll-menu a {
    display: inline-block;
    margin-right: 20px;
    text-decoration: none;
    color: #333;
  }
</style>
</head>
<body>

<div class="scroll-menu">
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <!-- Add more links as needed -->
</div>

<script>
  // Optional: Add smooth scrolling behavior
  document.querySelectorAll('.scroll-menu a').forEach(link => {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      target.scrollIntoView({ behavior: 'smooth' });
    });
  });
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：菜单项过多导致页面加载缓慢

原因：大量菜单项可能增加页面的DOM节点数量，影响加载性能。

解决方法：

使用虚拟滚动技术，只渲染可视区域内的菜单项。
对菜单项进行分组或分页显示。

问题2：滚动不流畅

原因：可能是由于 CSS 样式或 JavaScript 事件处理不当。

解决方法：

确保使用 overflow-x: auto 而不是 scroll，以避免不必要的滚动条。
使用 requestAnimationFrame 来优化滚动事件的处理。

问题3：在移动设备上触摸滑动不灵敏

原因：可能是由于触摸事件处理不当或 CSS 样式影响。

解决方法：

添加 -webkit-overflow-scrolling: touch 属性以启用硬件加速。
确保菜单容器有足够的宽度以容纳所有菜单项。

通过以上方法，可以有效解决横向滚动菜单在实际应用中可能遇到的问题，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

Bootstrap 2修复了小型设备上的菜单问题

、、

在小的视窗中，我已经修复了菜单。下面是测试URL：如果您在中查看测试网址，您将在查看iPhone 5横向模式时看到问题。

浏览 1提问于2014-06-21得票数 0

1回答

我在手机上有一个菜单栏，上面有position: fixed和bottom: 0。它位于页面的底部，在除Safari之外的所有浏览器中都是纵向和横向的。在肖像中，它工作得很好。当您切换到横向时，它位于正确的位置，直到您向下滚动页面。当safari丢弃搜索菜单时，它会将菜单栏推到屏幕下方。对我来说(考虑到菜单栏的位置没有改变)，搜索菜单的下拉似乎将文档的底部移到了屏幕下方。下面是相关的组件：https://github.com&#x

浏览 25提问于2020-08-17得票数 0

1回答

水平滚动菜单的问题

、、

我面临的问题与横向滚动菜单进入我的网站。

浏览 2提问于2020-10-16得票数 0

回答已采纳

2回答

Android UI:水平和垂直滚动，与顶部和横向菜单协调

、

基本上，这个想法是在绿色内容区域上横向和垂直滚动(见下图)，两个菜单(红色和蓝色)应该相应地滚动。如果您从左到右滚动内容区域(绿色)，则blu顶部菜单也会滚动。如果您向上-向下滚动，红色菜单也应该向上-向下滚动。有人有什么建议吗？

浏览 2提问于2011-06-28得票数 0

回答已采纳

1回答

需要从水平滚动菜单列表中显示活动菜单，同时将内容滚动到底部。

、、、

我在页面顶部有菜单的水平列表，底部有内容。标题菜单有一个指向底部内容的特定部分的链接。在单击每个菜单时，内容需要滚动到该部分，效果良好。我已经找到了一些样式，我想从网上，但它没有横向滚动到菜单部分。这是我的需求的一个例子，但它需要在顶部有更多的菜单。另外，当我们将内容滚动到底部时，相应的菜单需要滚动可见区域。请查看两种情况下的活动菜单。

浏览 1提问于2020-01-03得票数 1

1回答

如何在移动设备上停止滚动，为什么翻译似乎会阻止它？

、、

红色按钮打开一个子菜单。但在移动设备上有一件事:在打开一个子菜单之前，你可以“滚动”，或者更好地说，向左/向右拖动菜单。打开子菜单后，它可以正常工作(这意味着您不能再向左/向右拖动，只能向上/向下拖动)。 &.submenu .menu-box{

浏览 0提问于2014-11-17得票数 1

3回答

愤怒的小鸟喜欢滚动菜单

、、、

当你启动“愤怒的小鸟”并点击play时，你会看到一个水平滚动的菜单，上面有一排居中的图片，一旦点击，你就可以开始游戏了。我想知道如何制作一个类似于此的菜单，因为它可以横向(水平)滚动并显示可点击的图像？提前感谢！

浏览 0提问于2011-03-17得票数 11

回答已采纳

1回答

横向切换导航无法滚动

、、

在横向视图中，我有一个移动导航，可以打开，但不能向下滚动查看更多菜单选项。当导航完全关闭时，这在某种程度上是可以的，但是我在一个项目上进行了二级切换，从而阻止了我向下滚动。它的样式并没有什么特别之处-- jQuery会在汉堡菜单图标上打开/关闭，并通过“太阳能服务”链接来打开它。菜单打开

浏览 0提问于2016-03-17得票数 0

1回答

单窗口变化不透明度

、、、

我注意到Xubuntu可以让我改变不活动窗口的不透明度，这对于在下面显示我的终端时播放小视频来说似乎不错。但在做其他事情时，它很快就会变得烦人--我不希望每一个不活动的窗口都透明，我也不想一直进入设置来关闭它。我能把它放在一扇窗户上吗？ (将其转换为既可设置透明性、始终位于顶部又可移除窗口装饰的脚本的奖励点数)

浏览 0提问于2017-01-26得票数 4

1回答

菜单滚动也会滚动背景屏幕

、、、、

当在iOS移动设备上打开我的web应用程序时，它会显示一个菜单图标，该图标显示在身体上。如果单击菜单图标，则会打开菜单弹出模式。当我们在菜单模式上滚动时，背景屏幕也会随着菜单项一起滚动。当菜单打开时，我在body上应用了overflow : hidden。这没什么用。当我把position: fixed放进去的时候，背景屏幕就会变成白色，身体上的所有东西都会转向左边。为此，我还应用了left: 0；right: 0；top:0；和bottom: 0；这

浏览 0提问于2017-09-09得票数 0

2回答

如何在钛合金上创建一个侧边菜单？

、、

我开始编写Titanium的程序，但我在创建横向菜单时遇到了麻烦。我想知道如何创建此菜单，以及如何调用app.js中的每个菜单选项

浏览 1提问于2015-05-14得票数 0

1回答

UIScrollview锁旋转

、、

我想锁定ScrollView，以便即使设备处于横向模式，滚动视图也保持在纵向状态。我看不到这个菜单选项，所以我必须用代码来做吗？

浏览 2提问于2013-11-12得票数 0

回答已采纳

1回答

颤动:使用新屏幕而不是以前的屏幕将屏幕旋转到横向

、、、、

我想从我的肖像菜单转到一个横向详细信息页面。我对它使用了以下代码，它适用于另一个转换(从简介到详细页)。这是因为菜单页面对于景观来说太长了，而且没有滚动条。我可以解决这个问题，但是有没有一种简单，干净的方法来清除页面，翻页，然后呈现新的内容呢？同样，在我的工作过渡中，当肖像内容旋转到横向时，它看起来很糟糕，或者更糟糕的是，如果新屏幕在返回横向之前跳回纵向几毫秒。

浏览 12提问于2020-10-09得票数 0

1回答

在反向横向和纵向模式下检测方向

、、

我想要检测反向横向和纵向。配置不支持ORIENTATION_REVERSE_LANDSCAPE或ORIENTATION_REVERSE_PORTRAIT。

浏览 1提问于2013-04-15得票数 1

1回答

如何在斯芬克斯(sphinx_rtd_theme)中放大侧边栏或添加水平滚动条？

、、、

添加水平滚动条？还是扩大侧边栏的宽度？或?

浏览 2提问于2020-11-03得票数 1

1回答

Nexus 7和媒体查询无法正常工作

、、

我正在努力为我的网站的响应式设计，并希望菜单移动到一个更移动友好的版本。当我为我的nexus7添加媒体查询时，当我移动到页面时，它不会立即工作，但如果我向下滚动并向上滚动，它就会工作！此外，如果我改变方向(横向到纵向)，它将工作！但如果我转到网站上的一个新页面，它也会这样想。当我尝试在非响应菜单中导航菜单时，它还会在我的网址末尾添加一个"#“。

浏览 13提问于2014-05-14得票数 0

2回答

如何防止我的网站汉堡包菜单让人们水平滚动

、、、

我想知道如何防止人们在打开和关闭我的汉堡菜单后在移动设备上横向滑动。在他们打开它之前，它工作得很好，但在它坏了之后，下一次关闭它时，他们可以横向滚动。

浏览 26提问于2021-03-17得票数 1

回答已采纳

1回答

锚标记链接向下滚动太远，但仅在Mobile上。

、、、、

条形图中的每个链接都是一个锚链接，向下滚动到相应的ID。如果您以全屏模式查看站点，锚链接将准确地滚动到它们应该到达的位置，但是如果将屏幕调整到移动视图的大小，它们最终会滚动得太远。问题是，如果移除偏移量，它就会在移动和桌面上向下滚动得太远。

浏览 2提问于2014-10-15得票数 2

2回答

如何使用Javascript / Jquery检测底部视口滚动条的水平滚动

、、、

我使用下面的代码和一个JS .scroll来检测底部视口滚动条何时被横向滚动(然后根据该事件执行一些操作)。我看到的主体标签滚动条的问题是，只有当你一直滚动到5000px的底部时，它才会显示出来，我将内部div设置为5000px。对于我认为是自然的，HTML-底部-视窗-滚动条，它总是坐在浏览器窗口的底部，如果有滚动到的东西，但我不知道如何检测它的移动。.scroll有没有一种方法可以检测到它正在滚动，或者有没有其他方法可以检测视口是

浏览 32提问于2018-08-15得票数 1

2回答