Question

首先感谢您的任何帮助。

案例： 我在一行中有多个div。这些div在一个盒子里，我可以在这个框中水平滚动以查看其他div。当我们悬停或点击这些按钮时，我已经制作了两个按钮（左边是L，右边是R）水平滚动。

问题： 我已经尝试了一些CSS和JavaScript，但我似乎无法做到这一点。

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

使用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

你可以使用那个）

＆＃13;

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,
    })
  }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Fiddle

Answer 2

Apache Commons Codec

void Client::onConnected()
{
    qDebug() << "Connected!";
    QByteArray block;
    QDataStream out(&block, QIODevice::WriteOnly);
    //Reserve 2 bytes
    out << (quint16)0 << mEmail << "|" << mPassword;
    //Back to the beginning
    out.device()->seek(0);
    //Write a block size
    out << (quint16)(block.size() - sizeof(quint16));
    mSocket->write(block);
}

Answer 3

使用jquery，如下面........

 $(".arrow-left").click(function () { 
   var leftPos = $('.box-inner').scrollLeft();
   $(".box-inner").animate({scrollLeft: leftPos - 50}, 1);
 });

 $(".arrow-right").click(function () { 
     var leftPos = $('.box-inner').scrollLeft();
     $(".box-inner").animate({scrollLeft: leftPos + 50}, 1);
  });

编辑：这是更新的小提琴https://jsfiddle.net/wsemLhtz/5/

Answer 4

你去吧！解决方案在这里使用一些简单的Jquery :)

http://codepen.io/AxelCardinaels/pen/rxMrem

HTML：

<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>

CSS：

.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;
}

JS：

$(".arrow-left").click(function(){
     // To get actual position
    var actualScroll = $(".box-inner").scrollLeft();
  // To set new position
  $(".box-inner").scrollLeft(actualScroll+50)
})

希望这就是你要找的东西！

悬停/单击时水平滚动

4 个答案: