iScroll插件实现自定义导航条

面向Web3，春暖花开

于 2019-08-27 12:11:08 发布

阅读量268

点赞数

分类专栏：前端文章标签：导航条 iscroll

本文链接：https://blog.csdn.net/weixin_29491885/article/details/100097304

版权

前端同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

插件

10 篇文章 1 订阅

订阅专栏

iScroll插件实现自定义导航条

HTML

<body onload="loaded()">
    <div id="wrapper">
      <div id="scroller">
        <div class="scroll-box">
          <ul class="row  mt-170">
            <li class="col-xs-12  ico-develop-list">
              <div class="develop-box">
                <div class="dev-date">2017.Q3</div>
                 <div class="dev-des">
                    <ul>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                    </ul>
                   </div>
              </div>
            </li>
            <li class="col-xs-12  ico-develop-list">
              <div class="develop-box">
                <div class="dev-date">2017.Q3</div>
                 <div class="dev-des">
                    <ul>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                    </ul>
                   </div>
              </div>
            </li>
            <li class="col-xs-12  ico-develop-list">
              <div class="develop-box">
                  <div class="dev-date">2017 Q4</div>
                  <div class="dev-des">
                    <ul>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                    </ul>
                   </div>
              </div>
            </li>
            <li class="col-xs-12  ico-develop-list">
              <div class="develop-box">
                  <div class="dev-date">2018 Q1</div>
                   <div class="dev-des">
                    <ul>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                    </ul>
                   </div>
              </div>
            </li>
            <li class="col-xs-12  ico-develop-list">
              <div class="develop-box">
                  <div class="dev-date">2018 Q2</div>
                  <div class="dev-des">
                    <ul>
                      <li><span class="ico-des-dot">•</span><div>API & SDK Dev</div></li>
                      <li><span class="ico-des-dot">•</span><div>Security Auditing</div></li>
                      <li><span class="ico-des-dot">•</span><div>Testing</div></li>
                    </ul>
                  </div>
              </div>
            </li>
            <li class="col-xs-12  ico-develop-list">
              <div class="develop-box">
                  <div class="dev-date">2018 Q3</div>
                   <div class="dev-des">
                    <ul>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                      <li><span class="ico-des-dot">•</span><div>测试数据</div></li>
                    </ul>
                   </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</body>

CSS:

//自定义滚动条样式（水平滚动条）
.iScrollHorizontalScrollbar {
    position: absolute;
    z-index: 9999;
    height: 24px;
    width: 300px;
    left: 50%;
    -webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);
    bottom: 0;
    overflow: visible!important;
}
.iScrollHorizontalScrollbar:before{
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    height: 0;
    width: 100%;
    border-top: 2px solid #c8d2d7;
}

.iScrollHorizontalScrollbar .iScrollIndicator {
    position: absolute;
    width: 64px!important;
    height: 24px!important;
    background:url(../images/icon/slide_btn@2x.png) no-repeat top left/cover;
}
//父盒子
#wrapper {
    position: absolute;
    z-index: 1;
    top: 328px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow: hidden;
}

#scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
.scroll-box>ul {
        width: 1800px;
        border-top: 4px solid #c8d2d7;
        padding-left: 132px;
    }
    .ico-develop-list {
        width: 263px;
        position: relative;
        border-left: 1px solid #c8d2d7;
        min-height: 160px;
    }
    .ico-develop-list:nth-of-type(2n+1) {
        -webkit-transform: translateY(-160px);
        -moz-transform: translateY(-160px);
        -ms-transform: translateY(-160px);
        transform: translateY(-160px);
    }
    .ico-develop-list:before {
        content: '';
        position: absolute;
        top: -14px;
        left: -12px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        width: 8px;
        height: 8px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #c8d2d7;
        border: 8px solid #f2f5f6;
        -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    }
    .ico-develop-list:nth-of-type(2n+1):before {
        top: auto;
        bottom: -14px;
    }
    .develop-box {
        position: absolute;
        padding-left: 16px;
        bottom: 0;
    }
    .ico-develop-list:nth-of-type(2n+1) .develop-box {
        top: 0;
        bottom: auto;
    }
    ul{
    list-style:none;
    }

JS:

//先引包 
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript” src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js">
<script>
var myScroll;
function loaded() {
        myScroll = new IScroll('#wrapper', { scrollX: true, scrollY: false,mouseWheel:true,scrollbars: 'custom', interactiveScrollbars: true });
}
</script>

1、首先是iscroll的实例化方式

    var myScroll = new IScroll('#id');

2、添加参数

v5默认水平滚动禁用掉，竖直默认启用

参数：

scrollX: true 开启水平方向滚动
scrollY: false 关闭竖直方向滚动
startX：0 滚动的初始x位置
startY：0 滚动的初始y位置
mouseWheel:true 开启鼠标滚轮支持
scrollbars: ‘custom’ 开启滚动条支持（显示滚动条）
fadeScrollbars:true 开启滚动条淡入淡出方式
interactiveScrollbars: true 让滚动条能够拖动
interWheelDirection：true 开启反转滚动的方向（即滚轮向下，滚动条向上）
tap :”myEvent” 在滚动区域开启tap事件（事件的名称为“myEvent”）
resizeScrollbars:false 滚动条固定大小（默认值为true，可以根据容器决定滚动条的大小）
shrinkScrollbars : scale 有效的值为：‘clip’和’scale’。
- ‘clip’是移动指示器到它容器的外面，效果就是滚动条收缩起来，简单的移动到屏幕以外的区域。属性设置为此值后将大大的提升整个iScroll的性能。
- 值’scale’关闭属性useTransition，之后所有的动画效果将使用requestAnimationFrame实现。指示器实际上有各种尺寸，并且最终的效果最好。
- 默认值：false注意改变大小不是在GPU上执行的，所以’scale’是在CPU上执行。如果你的应用程序将在多种设备上运行，我建议你使用选项’scale’，或者设置 ‘clip’为false(例如：在较老的设备上应该设置为’clip’，而在桌面浏览器上应设置为’scale’)。
滚动的编程接口
- scrollTo(x,y,time,easing)（滚动到任意的位置）
  - 对应存在的一个叫做myScroll的iScroll实例，可以通过下面的方式滚动到任意的位置：myScroll.scrollTo(0,-100);通过上面的方式将向下滚动100个像素。记住：0永远是左上角。需要滚动你必须传递负数。 time和easing是可选项。他们控制滚动周期（毫秒级别）和动画的擦除效果。擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做：
  - myScroll.scrollTo(0,-100,1000,IScroll.utils.ease.elastic);
  - 擦除动画的类型选项有：quadratic,circular,back,bounce,elastic。
- scrollBy(x,y,time,easing)（从当前位置滚动任意位置）
  - 和上面一个方法类似，但是可以传递X和Y的值从当前位置进行滚动。 myScroll.scrollBy(0,-10);上面这个语句将在当前位置向下滚动10个像素。如果你当前所在位置为-100，那么滚动结束后位置为-110.
- scrollToElement(el,time,offsetX,offsetY,easing)（滚动到某个元素的左上角位置）
  - 这是一个很有用的方法，你会喜欢它的。在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器，iScroll
  - 将尝试滚动到这个元素的左上角位置。 time是可选项，用于设置动画周期。 offsetX和offsetY定义像素级的偏移量，所以你可以滚动到元素并且加上特别的偏移量。但并不仅限于此。如果把这两个参数设置为true，元素将会位于屏幕的中间。请参考例子滚动到元素example。 easing参数和scrollTo方法里的一样。
对齐（iScroll能对齐到固定的位置和元素。）
- Options.snap（以某个子元素对齐分割）
  - var myScroll=newIScroll(’#wrapper’,{ snap:true}); 这将按照页面容器的大小自动分割滚动条。 snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面：
  - var myScroll=newIScroll(’#wrapper’,{snap:‘li’}); 这个示例中滚动条将会对齐到每一个LI标记的元素。
- goToPage(x,y,time,easing)（滚动到指定页）
  - x和y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条，只需要为你不需要的轴向传递0值。 time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。 myScroll.goToPage(10,0,1000); 这个例子将在一秒内沿着横向滚动到第10页。
  - next()（下一页）
  - prev()（上一页）滚动到当前位置的下一页或者前一页

若遇到在滚动区域中某些地方的默认事件无法触发，基本上是由于IScroll把滚动区域中的表单元素默认事件都禁用掉了，也就是e.preventDefault()（为了滚动顺畅），可根据需要在源码中做个判断，比如你想保留A标签的默认事件，则可以对被点击的元素的tagName进行判断，然后决定要不要e.preventDefault()。

我的个人博客,有空来坐坐

面向Web3，春暖花开

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iScroll插件实现自定义导航条

iScroll插件实现自定义导航条HTML<body onload="loaded()"> <div id="wrapper"> <div id="scroller"> <div class="scroll-box"> <ul class="row mt-170"> ...
复制链接

扫一扫