jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

别等时光非礼了梦想. 提交于 2019-11-28 19:57:56

I was recently working with scrollTo to implement a Coda-like slider wizard.

Here's the steps I took:

  1. Set a containing div to the dimensions I wanted the slider to appear as. overflow:auto; helps for testing, but you'll probably want to use overflow:hidden in the end.
  2. Inside that place another div, make it big enough to hold all your elements horizontally.
  3. Float the panels. give them explicit dimensions.

My CSS:

.scroller{
  position: relative;
  overflow: hidden;
  height: 410px;
  width: 787px;}
  .modal-content{width: 3400px;}
    .modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;} 

My JS:

function sliderScroll(target){
  if(target.length <1)return false;
  $(".current").removeClass("current");
  target.addClass("current");
  $(".scroller").scrollTo(target,500,{axis:'x'});
  return false;
}

My HTML:

<div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!