New:Introducing Socket Scanning for VS Code Marketplace Extensions.Learn more →
Get Started

np-scrollp

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

np-scrollp

解决IOS上面各种body overScroll

latest
Source
npmnpm
Version
2.0.2
Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

#移动设备web开发防滚插件

向上找到能滚的元素然后让它滚。支持xy轴各种滚。 主要是保留ios上overScroll的体验,同时避免出现body的overScroll导致fixed的元素不fixed

body中加一个全屏的wrapper代替body作为容器,wrapper的scroll按需设置成scroll|auto

##规则:

  • overflow:scroll并能滚动的元素在scroll方向上始终保持能够滚动状态
  • overflow:auto 的元素在scroll方向上如果能滚动则滚动,不能滚动则向上查找可滚动元素

##实现:

  • touchstart:
  • 找到当前手指[0]的元素向上冒泡的第一个[规则1]元素,如果元素在滚动方向上贴到边缘,则往反方向挪动1px,使移动时能保持滚动
  • touchmove:
  • 判断是否时排除的元素
  • 找到当前手指[0]的元素向上冒泡的符合下面条件的元素:
    • overflow:scroll/auto
    • scrollSize > clientSize
    • 滚动方向上没有贴到边缘
  • 上述两个条件都不符合则evt.prentDefault();

##config:

  • isExtraElement [function] 排除节点判定,input[type="range"]等

##使用 require('np-scrollp') .config({ //config xxx }) //初始化绑定touch事件 .bind() //把fixed的节点移动到body里面, move([nodes, targetDOM]) .move();

    //解除事件绑定(虽然写了这个api之后从来没用过)
    .destory();

FAQs

Package last updated on 31 Jul 2015

Related posts