像苹果一样的水平滚动按钮

Question

我正在尝试使用apple.com/ipod或medium.com之类的左右按钮制作水平滚动导航栏

我搜索了很多，但没有解决方案。其中一些与jQuery 2配合良好，但不适用于最新版本。怎么能做到这一点？

我的代码很简单：

https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

旧的-无法正常工作-解决方案在这里 Jquery horizontal Scroll using buttons

Answer 1

这是您想要实现的吗？

const SLIDE_AMOUNT = 200;

const scrollMenu = document.querySelector('.scrollmenu');
const scrollMenuInner = scrollMenu.querySelector('.scrollmenu-inner');

const leftBtn = document.querySelector('.scrollmenu-btn-left');
const rightBtn = document.querySelector('.scrollmenu-btn-right');

leftBtn.addEventListener('click', slideLeft);
rightBtn.addEventListener('click', slideRight);

function getOffset() {
  const offset = parseInt(scrollMenuInner.style.marginLeft.slice(0, -2));
  return isNaN(offset) ? 0 : offset;
}

function slideRight() {
  const offset = getOffset();

  const diff = scrollMenuInner.clientWidth + offset - scrollMenu.clientWidth
  if (diff >= SLIDE_AMOUNT) {
    scrollMenuInner.style.marginLeft = `${offset - SLIDE_AMOUNT}px`;
  } else if (diff < SLIDE_AMOUNT && diff > 0) {
    scrollMenuInner.style.marginLeft = `${offset - diff}px`;
  }
};

function slideLeft() {
  const offset = getOffset();

  if (Math.abs(offset) >= SLIDE_AMOUNT) {
    scrollMenuInner.style.marginLeft = `${offset + SLIDE_AMOUNT}px`;
  } else if (Math.abs(offset) < SLIDE_AMOUNT && offset < 0) {
    scrollMenuInner.style.marginLeft = '0px';
  }
}

body { font-family: sans-serif; }

.scrollmenu-container {
  display: flex;
  max-width: 500px;
}

.scrollmenu {
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: #222;
  white-space: nowrap;
}

.scrollmenu-inner {
  display: inline-flex;
  transition: margin-left 0.3s ease-in-out;
}

.scrollmenu:after {
  content: '';
  width: 100%;
  height: 200%;
  top: -50%;
  left: 0;
  position: absolute;
  pointer-events : none;
  box-shadow:
    10px 0 20px #222 inset,
    -10px 0 20px #222 inset;
}

.scrollmenu-container button {
  background-color: #555;
  color: #ccc;
  border: none;
  cursor: pointer;
  padding: 0 0.5rem;
}

.scrollmenu-container button:hover {
  color: #fff;
}

.scrollmenu a {
  color: white;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
}

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

<div class="scrollmenu-container">
  <button class="scrollmenu-btn-left">&lt;</button>
  <div class="scrollmenu">
    <div class="scrollmenu-inner">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="#home">Home 2</a>
      <a href="#news">News 3</a>
      <a href="#contact">Contact 3</a>
      <a href="#about">About 4</a>
      <a href="#home">Home 5</a>
      <a href="#news">News 6</a>
      <a href="#contact">Contact 7</a>
      <a href="#about">About 8</a>
    </div>
  </div>
  <button class="scrollmenu-btn-right">&gt;</button>
</div>

编辑：这是一个简单的jQuery版本：

$scrollMenu = $('.scrollmenu');

$('.btn-left').click(function() {
  $scrollMenu.animate({
    scrollLeft: '-=200px'
  }, 'slow');
});

$('.btn-right').click(function() {
  $scrollMenu.animate({
    scrollLeft: '+=200px'
  }, 'slow');
});

body {
  font-family: sans-serif;
}

.scrollmenu-container {
  display: flex;
  max-width: 500px;
}

.scrollmenu {
  flex: 1;
  overflow: hidden;
  display: flex;
  background-color: #222;
  white-space: nowrap;
}

.scrollmenu-container button {
  background-color: #555;
  color: #ccc;
  border: none;
  cursor: pointer;
  padding: 0 0.5rem;
}

.scrollmenu-container button:hover {
  color: #fff;
}

.scrollmenu a {
  color: #fff;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollmenu-container">
  <button class="btn-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="#home">Home 2</a>
    <a href="#news">News 3</a>
    <a href="#contact">Contact 3</a>
    <a href="#about">About 4</a>
    <a href="#home">Home 5</a>
    <a href="#news">News 6</a>
    <a href="#contact">Contact 7</a>
    <a href="#about">About 8</a>
  </div>
  <button class="btn-right">&gt;</button>
</div>