主页 / 问题 / 1066804
Accepted
Frontender
Asked:2020-01-07 15:21:09 +0000 UTC2020-01-07 15:21:09 +0000 UTC

如何用手指向左/向右滚动菜单？

  • 772

该网站有一个二级菜单（蓝色），在移动设备上可以左右翻转手指。如何制作这样的菜单？

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    这个任务很可能用没有 JavaScript 的纯 CSS 来解决。

    是的，那是 2020 年，Windows 上的滚动条就这样被隐藏了……

    <!DOCTYPE html>
    <html>
    <head>
      <title>Drag and drop</title>
      <style>
        ::-webkit-scrollbar {
            width: 0;
            height: 0;
            background: transparent;
        }
        html {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        nav {
          border: 1px solid black;
          overflow-x: scroll !important;
        }
        nav>ul {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          padding-inline-start: 0;
          margin-block-start: 0;
          margin-block-end: 0;
        }
        nav>ul>li {
          list-style-type: none;
          padding: 5px;
          margin: 5px;
        }
        nav>ul>li:not(:first-child) {
          margin-left: -1px;
          border-left: 1px solid black;
        }
      </style>
    </head>
    <body>
      <nav>
        <ul>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
        </ul>
      </nav>
    </body>
    </html>

    PS您可以使用以下脚本在计算机上按住鼠标按钮进行滚动

    (function() {
  const element = document.querySelector('nav');
  let startX;
  let scrollLeft;
  element.addEventListener('mouseup', () => element.classList.remove('scrolling'));
  element.addEventListener('mousedown', (e) => {
    element.classList.add('scrolling');
    startX = e.pageX - element.offsetLeft;
    scrollLeft = element.scrollLeft;
  });
  const move = (x) => {
    if (!element.classList.contains('scrolling')) {
      return;
    }
    const walk = (x - startX) * 3;
    element.scrollLeft = scrollLeft - walk;
  };
  element.addEventListener('mousemove', (e) => move(e.pageX - element.offsetLeft));
})();
    • 1

相关问题