html类似美团菜单滑动的效果左右联动

要实现类似美团菜单滑动的效果左右联动，可以使用一些现成的 JavaScript 插件或者自己编写 JavaScript 代码实现。

其中，比较常用的插件是 Swiper 和 Slick。这两个插件都支持左右联动，可以根据具体需求进行配置和使用。

如果你想自己编写 JavaScript 代码实现左右联动，可以通过监听滚动事件来实现。首先需要获取到左右两个滚动容器的 DOM 元素，并且监听它们的滚动事件。当其中一个滚动容器滚动时，计算它的滚动位置，然后将另一个滚动容器滚动到对应的位置即可。

具体实现方式可以参考以下示例代码：

<div class="container">
  <div class="left-scroll">
    <!-- 左侧滚动容器的内容 -->
  </div>
  <div class="right-scroll">
    <!-- 右侧滚动容器的内容 -->
  </div>
</div>

<script>
  const container = document.querySelector('.container');
  const leftScroll = document.querySelector('.left-scroll');
  const rightScroll = document.querySelector('.right-scroll');

  leftScroll.addEventListener('scroll', () => {
    const scrollLeft = leftScroll.scrollLeft;
    rightScroll.scrollTo(scrollLeft, 0);
  });

  rightScroll.addEventListener('scroll', () => {
    const scrollLeft = rightScroll.scrollLeft;
    leftScroll.scrollTo(scrollLeft, 0);
  });
</script>

以上代码中，通过监听左侧和右侧滚动容器的滚动事件，实现左右联动的效果。当左侧滚动容器滚动时，右侧滚动容器也会滚动到对应的位置；当右侧滚动容器滚动时，左侧滚动容器也会滚动到对应的位置。