Question

我有一个侧滚动元素，用户可以使用简单的水平滚动条浏览。但是，我想在侧面添加一些按钮，像2张图片一样向前或向后移动并为其设置动画。

我对JQuery不是很熟悉，但这样的事情可能吗？我知道滚动条在技术上不是DOM的一部分，但实际上是浏览器的一部分，但有没有办法与它进行交互？

Answer 1

jQuery有一些built in scrolling functions，但它们可能不是您正在寻找的。

如果您想使用按钮，请将按钮添加到＆＃34;图像持有者＆＃34; DIV。您可以根据正在显示的图像阵列中的图像更改div的内容，并使用CSS更改按钮大小和位置。

您可以将javascript用于＆＃34; display_first（）＆＃34;，＆＃34; display_next（）＆＃34;和＆＃34; display_previous（）＆＃34;等功能。这些功能将隐藏当前显示的图像，显示图像阵列中的下一个/上一个图像。然后，您可以使用按钮调用这些功能。 onclick属性。

即

<button id="buttonR" onclick="display_next()">

Answer 2

对于你的情况，你可以使用jQuery的.scrollLeft(-100)将元素滚动到左边的位置200，如果你想向右滚动那里没有方法，因为这个.scrollLeft()可以为滚动做出魔力右边的一个元素。

有关jQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Horizontal Scroll Demo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <button class="scroll-btn scroll-to-left" type="button">←</button> <p>Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Etiam vitae tortor. Vivamus laoreet. Cras dapibus. Nam pretium turpis et arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tincidunt tincidunt erat. Donec venenatis vulputate lorem. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Phasellus gravida semper nisi. Morbi vestibulum volutpat enim. Curabitur a felis in nunc fringilla tristique. Phasellus accumsan cursus velit. Praesent venenatis metus at tortor pulvinar varius. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Sed in libero ut nibh placerat accumsan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In hac habitasse platea dictumst. Curabitur a felis in nunc fringilla tristique. Curabitur suscipit suscipit tellus. Donec mollis hendrerit risus. Sed lectus. Sed fringilla mauris sit amet nibh. Praesent ac massa at ligula laoreet iaculis.</p> <button class="scroll-btn scroll-to-right" type="button">→</button> </div> <script src="script.js"></script> </body> </html>的更多信息，请点击此链接：https://api.jquery.com/scrollleft/

我为你写了一个基本的演示，并希望它有所帮助。

工作演示链接： http://codepen.io/anon/pen/EKoVOj?editors=0010

<强>的index.html

div {
  background: tomato;
  color: white;
  font-size: larger;
  font-family: Calibri;
  margin: 50px auto;
  padding: 20px 20px 10px;
  overflow-x: scroll;
  height: 160px;
  width: 500px;
  position: relative;
}

div > p {
  margin: 0;
  width: 1500px;
}

.scroll-btn {
  background: lightblue;
  color: blue;
  border: none;
  padding: 2px 10px;
  font-size: xx-large;
  position: fixed;
  top: 0;
}

.scroll-btn:hover {
  background: blue;
  color: lightblue;
  cursor: pointer;
}

.scroll-btn.scroll-to-left { left: 0; }
.scroll-btn.scroll-to-right { right: 0; }

<强>的style.css

$(function() {
  'use strict';

  var scrollingValue = 30;
  var scrollbarPosition = 10;

  function getMaxChildWidth( elm ) {
    var childrenWidth = $.map($('>*', elm), function(el) { return $(el).width() });
    var max = 0;
    for (var i = 0; i < childrenWidth.length; i++) {
      max = childrenWidth[i] > max ? childrenWidth[i] : max;
    }
    return max;
  }

  function getScrollingValue(toLeft, ctx) {

    if (toLeft) {
      return scrollbarPosition < 1 ? 0 : scrollingValue;
    }
    return scrollbarPosition >= getMaxChildWidth(ctx) ? 0 : scrollingValue;
  }

  $('.scroll-btn.scroll-to-left').on('click', function() {
    $(this).parent().scrollLeft(
      scrollbarPosition -= getScrollingValue(true, $(this).parent())
    );
  });

  $('.scroll-btn.scroll-to-right').on('click', function() {
    $(this).parent().scrollLeft(
      scrollbarPosition += getScrollingValue(false, $(this).parent())
    );
  });
});

<强>的script.js

{{1}}

Answer 3

您需要创建这些按钮，然后将点击事件绑定到每个按钮。在这些活动中，使用window.scrollTo()或window.scrollBy()来实现您的目标。

如何创建一个像水平滚动条一样的按钮？

3 个答案: