Question

当我点击左箭头或右箭头时，我试图让页面的这个水平部分自动滚动。我可以让Jquery代码在控制台中正确运行。但是，我的页面上根本不会运行自动滚动事件。任何人都可以对此问题提供任何见解吗？

代码如下：

HTML

<div class = "horizon horizon-prev">
      <img src = "../images/left-arrow.png" />
    </div>
    <div class = "horizon horizon-next">
      <img src = "../images/right-arrow.png" />
    </div>

  <div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
    </div>

CSS

div.center {
 width: 90%;
 height: 210px;
 border: 1px solid #000;
 margin: auto;
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
  }
  div.internal {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   text-align: center;
  }

Jquery的

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=775px"
  }, "slow");
});

 $('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=775px"
  }, "slow");
});

Answer 1

（基于查看您的网站sethspivey.com）

您需要添加正在使用的缺失事件参数，并将点击处理程序移动到document.ready中，如下所示：

$(function() {
  $('.horizon-prev').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-=775px"
    }, "slow");
  });

   $('.horizon-next').click(function(event) {
    event.preventDefault();
    $('#content').animate({
     scrollLeft: "+=775px"
    }, "slow");
  });
});

Answer 2

我把你的代码作为这个，它完美地工作。

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=775px"
  }, "slow");
});

 $('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=775px"
  }, "slow");
});

div.center {
 width: 90%;
 height: 210px;
 border: 1px solid #000;
 margin: auto;
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
  }
  div.internal {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
    </div>
    
    <button class="horizon-prev">Prev</button>    <button class="horizon-next">Next</button>

Answer 3

问题是jQuery将事件处理程序绑定到尚未加载的div上的“click”JavaScript事件。只有在DOM完全加载时才应该执行它。

要解决此问题，请在http://sethspivey.com/js/index.js文件中将代码更改为：

/* CLICK SCROLL FUNCTIONS JQUERY */
$(function(){
  $('.horizon-prev').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-="+toScroll+"px"
    }, "slow");
  });

  $('.horizon-next').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "+="+toScroll+"px"
    }, "slow");
  });
});

Answer 4

对于更好的演示进行一些修改似乎在我工作正常：

<div class="horizon horizon-prev">
  <img src="../images/left-arrow.png" />
</div>
<div class="horizon horizon-next">
  <img src="../images/right-arrow.png" />
</div>

<div class="center" id="content">
  <div class=internal>
    div 1
  </div>
  <div class=internal>
    div 2
  </div>
  <div class=internal>
    div 3
  </div>
  <div class=internal>
    div 4
  </div>
  <div class=internal>
    div 5
  </div>
  <div class=internal>
    div 6
  </div>
  <div class=internal>
    div 7
  </div>
  <div class=internal>
    div 8
  </div>

div.center {
  width: 200px;
  height: 210px;
  border: 1px solid #000;
  margin: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

div.internal {
  margin: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 198px;
  text-align: center;
}

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=198px"
  }, "slow");
});

$('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=198px"
  }, "slow");
});

https://jsfiddle.net/w87xycrq/1

Answer 5

这是一个古老的帖子，也许现在有一种更简单的方法可以实现此目的，但是尽管如此，它还是对我正在从事的项目有所帮助。上面的scrollLeft建议可以使您满意，但是例如，如果您继续单击鼠标右键5次到达div的末尾，则会向scrollLeft添加5 x 200px，因此您必须单击鼠标左6次才能移回200px。这段额外的代码为我解决了这个问题。另外，您也可以在到达内容div的结尾/开头时禁用该按钮：

$('.horizon-next').click(function() {
  event.preventDefault();
  let currentScroll = $('#content').get(0).scrollLeft;
  let scrollWidth = $('#content').get(0).scrollWidth;
  if((currentScroll - 200) <= 0){
        return;
  }else{
        $('#content').animate({
            scrollLeft: '-=200px'
        }, "slow");
  }
});


$('.horizon-next').click(function() {
  event.preventDefault();
  let currentScroll = $('#content').get(0).scrollLeft;
  let scrollWidth = $('#content').get(0).scrollWidth;
  if((200 + currentScroll) >= scrollWidth){
        return;
  }else{
        $('#content').animate({
            scrollLeft: '+=200px'
        }, "slow");
  }
});

Jquery水平滚动单击

5 个答案: