Question

这是我所拥有的代码的jfiddle，当单击右箭头按钮时，可以移动div（现在为50px）。但是，我似乎错过了一些东西，因为当我按下按钮时它不会滚动。使用chrome检查我看到javascript正在执行，'view'为15px

HTML：

<div class="sortable-outer">
  <div class="pc-row sortable">
    <div class="pc-col-xs-4"></div>
    <div class="pc-col-xs-4"></div>
    <div class="pc-col-xs-4"></div>
    <div class="pc-col-xs-4"></div>
  </div>
</div>
<div class="bnr-fpc-fs-controls-control right lg left-arrow-button">
  <svg width="32" height="32" viewBox="0 0 32 32" id="carousel_arrow" x="287" y="384.561">
    <path d="M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 29c7.168 0 13-5.832 13-13S23.168 3 16 3 3 8.832 3 16s5.832 13 13 13zM13.5 9c.39 0 .743.153 1.01.398l.004-.003 6 5.5a1.5 1.5 0 0 1 0 2.21l-6 5.5-.003-.003c-.267.245-.62.398-1.01.398a1.5 1.5 0 0 1-1.5-1.5c0-.438.19-.828.49-1.102l-.004-.003L17.28 16l-4.794-4.395.003-.003A1.49 1.49 0 0 1 12 10.5 1.5 1.5 0 0 1 13.5 9z"
    fill="#818091" fill-rule="evenodd" />
  </svg>
</div>
<div class="bnr-fpc-fs-controls-control next lg right-arrow-button">
  <svg width="32" height="32" viewBox="0 0 32 32" id="carousel_arrow" x="287" y="384.561">
    <path d="M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 29c7.168 0 13-5.832 13-13S23.168 3 16 3 3 8.832 3 16s5.832 13 13 13zM13.5 9c.39 0 .743.153 1.01.398l.004-.003 6 5.5a1.5 1.5 0 0 1 0 2.21l-6 5.5-.003-.003c-.267.245-.62.398-1.01.398a1.5 1.5 0 0 1-1.5-1.5c0-.438.19-.828.49-1.102l-.004-.003L17.28 16l-4.794-4.395.003-.003A1.49 1.49 0 0 1 12 10.5 1.5 1.5 0 0 1 13.5 9z"
    fill="#818091" fill-rule="evenodd" />
  </svg>
</div>

CSS：

.sortable {
  min-width: 729px;
}

.sortable-outer {
  overflow-x: scroll;
}

.pc-row {
  width: 1750px;
}

.pc-col-xs-4 {
  width: 320px;
  margin-right: 30px;
  float: left;
  height: 100px;
  background-color: red;
}

.left-arrow-button {
  transform: rotate(180deg);
}

.left-arrow-button:hover, .right-arrow-button:hover {
  background-color: yellow;
}

和javascript：

$('.right-arrow-button').click(function() {
  var view = $('.sortable');
  var move = "50px";
  var sliderLimit = -234;

  var currentPosition = parseInt($('.sortable').offset().left);
  if (currentPosition >= sliderLimit) $('.sortable').stop(false, true).animate({
    left: "-=" + move
  }, {
    duration: 400
  });
});

Answer 1

一些事情：

$('.sortable')没有捕获任何内容。
您需要scrollLeft，而不是left。 left指的是对象的位置偏移量，即它会将项目向右移动left值。
您不需要后缀px作为移动值。
您不需要保护动画，因为它永远不会滚动超出限制。

以下是代码：

https://jsfiddle.net/cm014krh/5/

Answer 2

我认为出现问题的方法有两方面：

1。您正在尝试为内部 div设置动画，但我相信您应该滚动外部 div，即{ {1}}。

2。在您尝试滚动的情况下，您可能希望使用sortable-outer，而不仅仅是scrollLeft。

left

var $view = $('.sortable');
var move = "50px";

$('.right-arrow-button').click(function() {
    var currentPosition = parseInt($view.offset().left);
    $('.sortable-outer').stop(false, true).animate({
        scrollLeft: "+=" + move
    }, {
        duration: 400
    });
});


$('.left-arrow-button').click(function() {
    var currentPosition = parseInt($view.offset().left);
    $('.sortable-outer').stop(false, true).animate({
        scrollLeft: "-=" + move
    }, {
        duration: 400
    });
});

.sortable {
    min-width: 729px;
}

.sortable-outer {
    overflow-x: scroll;
}

.pc-row {
    width: 1750px;
}

.pc-col-xs-4 {
    width: 320px;
    margin-right: 30px;
    float: left;
    height: 100px;
    background-color: red;
}

.left-arrow-button {
    transform: rotate(180deg);
}

.left-arrow-button:hover,
.right-arrow-button:hover {
    background-color: yellow;
}

单击功能以滚动div不起作用

2 个答案: