javascript - 悬停/单击时水平滚动

Question

首先提前感谢您的帮助。

案例:我在一行中有多个 div。这些 div 位于一个框中，我可以在此框中水平滚动以查看其他 div。我制作了两个按钮(L 表示左侧，R 表示右侧)，以便在悬停或单击这些按钮时水平滚动。

问题:我已经尝试过使用一些 CSS 和 JavaScript，但我似乎无法做到这一点。

有人知道如何在悬停/单击按钮(或箭头)时实现水平滚动吗？

我做了一个 fiddle :https://jsfiddle.net/wsemLhtz/

让这个仅使用 CSS 或简单的 JavaScript 工作会很棒，因为我必须将它实现到 Joomla 系统中。我知道那里有一些 jQuery 插件，但在 Joomla 中，我必须用“jQuery”替换所有 $-tags，在每个文件中都这样做很烦人。

最好的问候。

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}

.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<div class="box-outer">
  <a class="arrow-left">L</a>
  <a class="arrow-right">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Answer 1

你可以使用那个)

var box = $(".box-inner"), x;
$(".arrow").click(function() {
  if ($(this).hasClass("arrow-right")) {
    x = ((box.width() / 2)) + box.scrollLeft();
    box.animate({
      scrollLeft: x,
    })
  } else {
    x = ((box.width() / 2)) - box.scrollLeft();
    box.animate({
      scrollLeft: -x,
    })
  }
})

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}
.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}
.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}
.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}
.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box-outer">
  <a class="arrow-left arrow">L</a>
  <a class="arrow-right arrow">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Fiddle