logo标签列表

点击实现Jquery水平滚动

jqueryhtmlcss
6

我希望当点击左右箭头时，页面的水平部分可以自动滚动。在控制台中，我能够正确运行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");
});
“.horizon-prev”和“.horizon-next”类在哪里？ - Francisco Romero
@Error404，我刚刚编辑了示例以展示它们的位置。很抱歉没有包含代码。 - Seth Spivey
这个程序相关的内容翻译成中文如下：http://jsbin.com/wokofepuvi/1/edit?html,css,js,output。它对我有效。 - user3141603
正如@VladGincher所指出的那样，这个方法是有效的...另外，我建议你使用％宽度从center的实际宽度中获取滚动值...请查看https://jsfiddle.net/fwnv28hu/ - DaniP
@VladGincher 请查看 sethspivey.com。不知何故，只有在控制台中运行代码时才能正常工作。 - Seth Spivey
显示剩余3条评论
5个回答
5

您需要添加缺失的事件参数，并将点击处理程序移动到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");
  });
});
3
我理解您的代码如下，它运行得非常完美。 

$('.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>

1
问题在于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");
  });
});
在将这个代码与DaniP在他的jsfiddle中提供的scrollTo定义结合后，它能够完美地工作。谢谢。 - Seth Spivey
请重新编辑您的答案...因为您在评论中使用了我提供的代码，请复制完整的代码...这里没有“toScroll”值。 - DaniP
@DaniP 我使用了 http://sethspivey.com/js/index.js 的代码，只是在开头添加了 $(function(){ ，在结尾添加了 });... - user3141603
1
这是一篇旧帖子，现在可能有更简单的方法来实现这个功能，但无论如何，它对我正在工作的项目有所帮助。上面的scrollLeft建议非常有效，但当你到达div的末尾时，如果你继续向右点击5次，例如，它会将5 x 200px添加到scrollLeft中，因此您必须向左点击6次才能回退200px。这段额外的代码为我解决了这个问题。或者在到达内容div的末尾/开头时禁用按钮也可以：
$('.horizon-prev').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");
  }
});
1
非常好用，谢谢。但我认为您有两个“下一个”选择器，而不是“下一个”和“上一个”。 - Bojan
确实是这样。现在已经更新了，谢谢。 - LaZza
0

经过一些修改以获得更好的演示效果，似乎运行良好：

<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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接