jquery 实现导航栏的左右滑动 (scrollLeft scrollTop)

June 06, 2018 17:07
访问量:386
摘要:对于pc导航栏,当选项太多时,需要左右点击滑动看到更多的选项,需要自定义每次点击滑动的距离。

输入图片说明

1.html的部分:

    <div class="arrow_right" id="arrow_left" style="margin: 0 10px;">
      ![](http://siweitech.b0.upaiyun.com/cms/2018-01-05-arrow_left.png)
    </div>

    <% @second_category_classes.each do |second_category_class|%>*   
      <a class="" id="<%= second_category_class.id %>" href="">
      </a>
    <% end %>

    <div class="arrow_right" id="arrow_right">
      ![](http://siweitech.b0.upaiyun.com/cms/2018-01-04-arrow_right.png)
    </div>

2.跳转css的样式

3.js

<script>
var position_x = 0
$("#arrow_right").click(function(){
  //限制position的位置不能无限加
  if (position_x <= $(".nav-pills").scrollLeft()) {
    position_x = position_x + 140
  }
  console.info("position_x=======" + position_x)
  $(".nav-pills").scrollLeft(position_x)
});
$("#arrow_left").click(function(){
  console.info("position_x=======" + position_x)
  if (position_x >= 140) {
    position_x = position_x - 140
  }
  $(".nav-pills").scrollLeft(position_x)
});
</script>

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站