javascript插件-iscroll和better-scroll

iscroll.js

iscroll.js插件是兼容所有移动端滚动条事件的插件，在某些安卓机中，我们无法通过overflow:scroll这个css属性来出现滚动条

要求

1》要给滚动元素加入一个父元素
(只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略)
2》父元素的高度值要小于滚动区域的高度
(如果为横向滚动则父元素的宽度值要小于滚动元素的宽度)
3》scroll是一个类，每个需要使用滚动功能的区域均要进行初始化

new IScroll(".main",{	
	scrollbars: true 
	是否显示滚动条。默认为false;
	fadeScrollbars:true
	滚动条淡入淡出效果,当然前提是你滚动条显示了。默false;
	bounce: false 
	滚动到达容器边界时是否执行反弹动画。默认为true;
	click:true 
	iScroll禁止默认鼠标的点击行为，如果要使用设置true,默认为false;
		});

最保险的方式是在window的onload事件中启动它。
综上：最小的iScroll配置如下

 
    ...
    
    
    
    ...
    
    
 
        

            
...
            
...
            ...
        
    
    

参考资料：
http://caibaojian.com/iscroll-5/
https://www.cnblogs.com/Renyi-Fan/p/9773747.html

better-scroll

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

要求

与iscroll基本一致，只是其用法为new BScroll(’.wrapper’),还有一点是要给需要滑动的子元素加上class:“content”;

进阶用法

① 图片轮播

*************************

    

        

            

            

            


        
    

    
    

• better-scroll比swiper的配置更加灵活，因为前者偏向于自由滑动，而后者偏向于轮播图效果，如不想手写样式和滑块配置可以选择swiper

② 整屏滚动

因为 better-scroll.js 本身默认就是竖屏滚动，因此配置会更加简洁。

  .wrapper{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        .wrapper li{
            width: 100vw;
            height: 100vh;
        }
        .wrapper li img{
            width: 100%;
            height: 100%;
            display: block;
        }
**********

        

            

            

            


        
    
 
 

常用配置

比较常用的 better-scroll 配置

{
  click: true,  // 元素可触发点击事件
  scrollX: false,  // 横向可滑动，默认为false
  scrollY: true,  // 纵向可滑动，默认为true
  bounce: false,  // 当滚动超过边缘的时候无回弹动画
  preventDefaultException: {  // 设置局部某元素原生事件不被禁止（默认preventDefault为true）
    className: 【正则表达式】
  },
  snap: {  // 滑动切换的一些配置
    speed: 800,  // 滑动切换的速度
    easing: {  // 滑动切换的动画效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑动切换到超过一半时切换到下一屏
    stepX: window.innerWidth,  // 横向切换距离为窗口宽度
    stepY: window.innerHeight  // 纵向切换距离为窗口高度
  }
}

参考资料：
https://www.jianshu.com/p/ccc8d4823438

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88