• 索性就不管了,招头头问了问需不需要做一个什么效果,偷偷说做一个下拉刷新的效果,然后就去做了。 有个一插件名字叫做iScroll.js,谁写的我忘了,我看了一下源代码大约是1000行,不算长。寻思放着以后再看,就没管...

    这几天刚刚到新公司,他们做了一个基于TkinkPHP框架的一个订货系统,因为临近上线了,所以我也搞不大懂。索性就不管了,招头头问了问需不需要做一个什么效果,偷偷说做一个下拉刷新的效果,然后就去做了。

    有个一插件名字叫做iScroll.js,谁写的我忘了,我看了一下源代码大约是1000行,不算长。寻思放着以后再看,就没管它。

    然后就开始自己做,思路是做成一个插件,使用了构造函数+原型的模式。

    结构是

    <div class=''wrapper'>
       <ul di="the-scroller"><li>....<li>
       </ul>
    </div>
    
    css很简单,就不说了。

    主要是在js的阶段,在构造函数内部声明默认属性,以及获得相关对象。

    其中一个比较陌生和重要的就是默认属性和客户自定义属性的获取。

    我开始是这样写的

    function PullScroller(){
         this.option = {
            id:arguments[0].id||"wrapper",
            type:arguments[0].type||"up"
    }
    很Low的方式,要是一个两个还好,要是200个呢?(Question1)

    所以我看了iscroll.js的代码,

    function PullScroll(el, options){
        //------------default option------------
        this.options = {
            listId:'',moveType:'up',CLName:'loading'
        };
        //------------user option------------
        for (i in options) this.options[i] = options[i];//i是key通过arr[key]的方式访问value
    
    }
    
    首先new的时候要把wrapper这个容器先传进去,然后后面跟一个options参数对象,这个对象就是客户可以自定义的参数接口,用for(key in value)的方式获得客户设置的每一个对象的值,然后赋值给默认的属性。关键是根据key来区分每一不同得属性。

    事件,关于touch的事件ontouchstart,touchmove,ontouchend,开始写的是用那种事件里面嵌套事件的方式写的,基本效果可以实现,但是在ontouchstart之后,ontouchmove里面的判断不好用,只要点击就会触发ontouchend事件。(Question2)

    关于这个问题分为两个步骤进行解决:

    1、不再使用ontouch等方式触发事件,而是使用addEventListener来添加事件监听,从而防止事件之间相互冲突。

    2、改变算法添加一个全局moving作为判断条件,如果只是start事件被触发那么moving为false,因为定义为向下移动,所以如果向上移动手指那么moving还是false,只有当向下移动成功的时候moving才是true,然后才可以触发end事件的监听。

    var that = this;//保存PullScroll对象;
    var moving = false;//是否移动完毕。
    
    
    
    //绑定触摸开始事件
    this.onEve(this.scroller,'touchstart',function(e){
        //e.stopPropagation();
        startPos = e.changedTouches[0].clientY;
        loadBan = document.createElement('div');//创建一个div装载loading
        loadBan.innerHTML = 'loading...';
        loadBan.className = that.options.CLName;
        that.wrapper.appendChild(loadBan);
    });
    
    
    
    //绑定触摸移动事件
    this.onEve(this.scroller,'touchmove',function(e){
        //e.stopPropagation();
        movePos = e.changedTouches[0].clientY;
        if(movePos>startPos){
            dist = (movePos - startPos)/3;
            that.scroller.style.top = dist + 'px';
            loadBan.style.cssText = "display:block;height:"+dist+'px;line-height:'+dist+'px;';
            moving  = true
        }else{
            moving = false;
        }
    });
    
    
    
    //绑定触摸结束事件
    this.onEve(this.scroller,'touchend',function(){
        //e.stopPropagation();
       if(moving){
           console.log(that.scroller);
           var liItem = document.createElement('li');
           liItem.innerHTML = "Hello World";
           that.scroller.insertBefore(liItem,that.scroller.children[0]);
           that.scroller.style.top = 0;
           that.wrapper.removeChild(loadBan);
           moving = false;
       }
    });
    基本效果到这里就写完了,然后就是下一个问题,在ios端Safari浏览器有一个橡皮筋效果,这个效果是浏览器自定义的。关问题是我还不知道他叫什么,百度了各种之后才知道这个叫橡皮筋效果,各种烦人啊。拉倒头之后就出现了一个打白条。(Question3)

    这个问题的解决方案就是组织浏览器document对象的默认行为。但是又出现问题了,就是整个项目无法滚动了。这是目前我困扰的一个问题。不知道如何解决。

    展开全文
  • 去除IOS橡皮筋效果

    2017-12-26 14:54:21
    All you need is an element with height or max-height, overflow: auto and -webkit-overflow-scrolling: touch. script src="inobounce.js">script> style> ul { height: 115px;...

    All you need is an element with height or max-heightoverflow: auto and -webkit-overflow-scrolling: touch.

    <script src="inobounce.js"></script>
    
    <style>
        ul {
            height: 115px;
            border: 1px solid gray;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
    
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
        <li>List Item 6</li>
        <li>List Item 7</li>
        <li>List Item 8</li>
        <li>List Item 9</li>
        <li>List Item 10</li>
    </ul>
    /*! iNoBounce - v0.1.0
    * https://github.com/lazd/iNoBounce/
    * Copyright (c) 2013 Larry Davis <lazdnet@gmail.com>; Licensed BSD */
    (function(global) {
    	// Stores the Y position where the touch started
    	var startY = 0;
    
    	// Store enabled status
    	var enabled = false;
    
    	var handleTouchmove = function(evt) {
    		// Get the element that was scrolled upon
    		var el = evt.target;
    
    		// Check all parent elements for scrollability
    		while (el !== document.body && el !== document) {
    			// Get some style properties
    			var style = window.getComputedStyle(el);
    
    			if (!style) {
    				// If we've encountered an element we can't compute the style for, get out
    				break;
    			}
    
    			// Ignore range input element
    			if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
    				return;
    			}
    
    			var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
    			var overflowY = style.getPropertyValue('overflow-y');
    			var height = parseInt(style.getPropertyValue('height'), 10);
    
    			// Determine if the element should scroll
    			var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
    			var canScroll = el.scrollHeight > el.offsetHeight;
    
    			if (isScrollable && canScroll) {
    				// Get the current Y position of the touch
    				var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;
    
    				// Determine if the user is trying to scroll past the top or bottom
    				// In this case, the window will bounce, so we have to prevent scrolling completely
    				var isAtTop = (startY <= curY && el.scrollTop === 0);
    				var isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height);
    
    				// Stop a bounce bug when at the bottom or top of the scrollable element
    				if (isAtTop || isAtBottom) {
    					evt.preventDefault();
    				}
    
    				// No need to continue up the DOM, we've done our job
    				return;
    			}
    
    			// Test the next parent
    			el = el.parentNode;
    		}
    
    		// Stop the bouncing -- no parents are scrollable
    		evt.preventDefault();
    	};
    
    	var handleTouchstart = function(evt) {
    		// Store the first Y position of the touch
    		startY = evt.touches ? evt.touches[0].screenY : evt.screenY;
    	};
    
    	var enable = function() {
    		// Listen to a couple key touch events
    		window.addEventListener('touchstart', handleTouchstart, false);
    		window.addEventListener('touchmove', handleTouchmove, false);
    		enabled = true;
    	};
    
    	var disable = function() {
    		// Stop listening
    		window.removeEventListener('touchstart', handleTouchstart, false);
    		window.removeEventListener('touchmove', handleTouchmove, false);
    		enabled = false;
    	};
    
    	var isEnabled = function() {
    		return enabled;
    	};
    
    	// Enable by default if the browser supports -webkit-overflow-scrolling
    	// Test this by setting the property with JavaScript on an element that exists in the DOM
    	// Then, see if the property is reflected in the computed style
    	var testDiv = document.createElement('div');
    	document.documentElement.appendChild(testDiv);
    	testDiv.style.WebkitOverflowScrolling = 'touch';
    	var scrollSupport = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch';
    	document.documentElement.removeChild(testDiv);
    
    	if (scrollSupport) {
    		enable();
    	}
    
    	// A module to support enabling/disabling iNoBounce
    	var iNoBounce = {
    		enable: enable,
    		disable: disable,
    		isEnabled: isEnabled
    	};
    
    	if (typeof module !== 'undefined' && module.exports) {
    		// Node.js Support
    		module.exports = iNoBounce;
    	}
    	if (typeof global.define === 'function') {
    		// AMD Support
    		(function(define) {
    			define('iNoBounce', [], function() { return iNoBounce; });
    		}(global.define));
    	}
    	else {
    		// Browser support
    		global.iNoBounce = iNoBounce;
    	}
    }(this));
    

    展开全文
  • ios橡皮筋效果会带来一些莫名其妙的bug。如果直接对body禁止的话,那整个页面都无法滑动了。所以我今天带来一个解决方案。原博客找不到了(T_T) 首先在methods中定义两个方法// 滑动开始获取初始位置坐标 ...

    相信有很多前端的朋友都遇到过这个问题,这个问题真的很头疼。ios的橡皮筋效果会带来一些莫名其妙的bug。如果直接对body禁止的话,那整个页面都无法滑动了。所以我今天带来一个解决方案。原博客找不到了,这是我重新改良的代码(T_T)
    首先在methods中定义两个方法

    // 滑动开始获取初始位置坐标
    touchstartFunction(e) {
    this.startY = e.touches[0].pageY;
    }

    // 监听手指滑动事件
    touchmoveFunction(e) {
    let el = document.querySelector(’.sympt_part’);// 需要滑动的dom元素这个为包裹滑动元素的父元素
    if (!e.isSCROLL) {
    e.preventDefault(); // 阻止默认事件(上下滑动)
    console.log(‘阻止了’);
    } else {
    // 需要滑动的区域
    let moveY = e.touches[0].pageY;
    let top = el.scrollTop;
    let ch = el.clientHeight;// 对象最顶端和窗口最顶端之间的距离
    let scrollH = el.scrollHeight; // 含滚动内容的元素大小
    if ((top === 0 && moveY > this.startY) || (top + ch === scrollH && moveY < this.startY)) {
    e.preventDefault();
    console.log(‘阻止了’);
    } else {
    console.log(‘开启了’);
    }
    }
    },
    在这里插入图片描述
    然后在mounted生命周期函数中添加事件监听

    // 禁止ios橡皮筋效果(弹簧效果)
    // ********************
    let ios = navigator.userAgent.indexOf(‘iphone’);// 判断是否为ios
    // 获取触摸坐标
    let _this = this;
    document.body.addEventListener(‘touchstart’, _this.touchstartFunction, { passive: false });
    //
    if (ios === -1) {
    // ios下运行
    let el = document.querySelector(’.sympt_part’);// 需要滑动的dom元素
    iosTrouchFn(el);
    }
    function iosTrouchFn(el) {
    // el需要滑动的元素
    el.addEventListener(‘touchmove’, function(e) {
    e.isSCROLL = true;
    });
    document.body.addEventListener(‘touchmove’, _this.touchmoveFunction, { passive: false }); // passive防止阻止默认事件不生效
    }

    然后在beforeDestroy生命周期函数中
    // 移除事件监听
    let _this = this;
    document.body.removeEventListener(‘touchstart’, _this.touchstartFunction, { passive: false });
    document.body.removeEventListener(‘touchmove’, _this.touchmoveFunction, { passive: false });
    在这里插入图片描述

    `

    展开全文
  • 由于微信小程序里canvas原生组件不支持 position:fixed,但我需要在已有的遮罩层上放一个固定位置的canvas组件。 解决办法:给遮罩层加上 catchtouchmove=‘true’ 即可 <view class="layout" catchtouchmove='...

    由于微信小程序里canvas原生组件不支持 position:fixed,但我需要在已有的遮罩层上放一个固定位置的canvas组件。
    ps:原本在ios系统下,直接固定外框下拉canvas还是会有橡皮筋效果,没有固定

    解决办法:给遮罩层加上 catchtouchmove=‘true’ 即可

    <view class="layout" catchtouchmove='true'>
    	<canvas class="qrcode"></canvas>
    </view>
    
    .layout{
         position: fixed;
    	  z-index: 100;
    	  background: rgba(0,0,0,0.7);
    	  top:0;
    	  left:0;
    	  bottom:0;
    	  right:0;
    	  width:100%;
    	  display: flex;
    	  justify-content: center;
    	  align-items: center
    }
    
    展开全文
  • 1.iOS safari 如何阻止“橡皮筋效果”? 背景: iOS 5 之后开始支持 Native Scrolling,为 Web App 带来媲美原生应用的滚动体验。使用十分方便只要在 CSS 中加入: HTML CSS .wrapper { overflow: auto; -...

    在ios系统中,页面在上下滑动的时候,会触发橡皮筋问题,页面的顶部和底部跟着页面一起滑动的问题,下面就讲一下如何解决这种问题。

    1、iOS如何阻止“橡皮筋效果”?
    背景:
    iOS 5 之后开始支持 Native Scrolling,为 Web App 带来媲美原生应用的滚动体验。使用十分方便只要在 CSS 中加入:

    HTML

    CSS
    .wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }

    但是 iOS Safari 在滑动的时候会有讨厌的 “橡皮筋效果” (Over Scroll):
    在这里插入图片描述

    设计:
    ┌─────────────┐
    │ Header │
    ├─────────────┤
    │ │
    │ Scroll Area │
    │ │
    ├─────────────┤
    │ Footer │
    └─────────────┘

    需求:
    Scroll Area 支持垂直区域滚动。
    滑动 Header 和 Footer 不会引发全局的 “橡皮筋效果”。
    Scroll Area 滑动到顶部或者底部,再向上或者向下拉动不会触发全局的 “橡皮筋效果”。
    情况2 会触发 Scroll Area 局部的 “橡皮筋效果”。

    2、如何解决

    我是用RN开发的,我这个核心方法,应该前端都使用,你们把一进页面的触发事件改下就行了。
    A页面(A引入B方法)

    //一进页面的时候执行的方法
     isIosStopScroll() {
        const ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否为ios
        if (ios) {
          var divEl = document.getElementById('myCardList'); //这是你需要定义的容器,这个容器里滑动正常,出了这个容器,页面的橡皮筋效果就被禁用掉了
          iosTrouchFn(divEl);
        }
     }
    
     componentDidMount() {
        this.init(); //这是页面加载内容的事件,可以忽略
        this.isIosStopScroll(); //这里开始执行
     }
    

    Bjs文件

    //解决ios橡皮筋问题
    export function iosTrouchFn(el) {
      //el需要滑动的元素
      el.addEventListener('touchmove', function (e) {
        e.isSCROLL = true;
      })
      document.body.addEventListener('touchmove', function (e) {
        if (!e.isSCROLL) {
          e.preventDefault(); //阻止默认事件(上下滑动)
        } else {
          //需要滑动的区域
          var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离 
          var scrollH = el.scrollHeight; //含滚动内容的元素大小
          var offsetH = el.offsetHeight; //网页可见区域高
          var cScroll = top + offsetH; //当前滚动的距离
    
          //被滑动到最上方和最下方的时候
          if (top == 0) {
            top = 1; //0~1之间的小数会被当成0
          } else if (cScroll === scrollH) {
            el.scrollTop = top - 0.1;
          }
        }
      }, { passive: false }) //passive防止阻止默认事件不生效
    }
    
    展开全文
  • 移动端项目经常碰到的一个问题是ios系统的橡皮筋效果处理,这个效果本身的体验还是挺不错的,但是当我们的应用出现遮罩层时,此时滑动页面,我们的预期是页面不进行滚动或者当前遮罩层内部滚动,而实际上滑动会触发...
  • 移动端开发中,iOS的微信浏览器也好、Safari也好在浏览网页的时候会出现橡皮筋效果。就是当页面拉到尽头的时候还能再继续拉动,露出浏览器的底色,松手会回弹回去。 微信浏览器: Safari: 只有iOS有这个效果,...
  • iOS小程序页面有个橡皮筋回弹效果,就是向上拉到底部或向下拉到顶部都还可以再拉并且还会回弹一部分页面,导致顶部或者底部被遮挡一部分页面。安卓机完全没有这个东西,这个好像是iOS独有。 解决被挡部分页面,就是...
  • 问题:在做手机端,通过拖拽调整某个div大小时,拖拽引起了整体页面的弹动 方法一:通过css设置body宽高 ...单纯解决橡皮筋效果,可以将body的touchmove事件禁止,可以替代第一种方法 documen...
  • ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为。 有两种方法可以解决这个问题:...
  • app嵌套h5,ios下去掉上下橡皮筋效果(上下回弹) 如果是前端自己解决的话会非常的费劲,我今天跟app开发的沟通了一下,他们很快的就解决了,所以直接用原生解决就行,不要下功夫找各种解决方法,到最后都是枉然,...
  • 先说结论: 可以去除滚动回弹,根据不同情况使用不同的方式。 1.程序内没有滚动 直接使用下面代码轻轻松松没毛病 document.body.addEventListener('touchmove',function(e){ e.preventDefault() },{ passive: ...
  • 感谢<https://www.cnblogs.com/cuncunjun/p/7493782.html>的启发,方法很有用! ...上周测试突然找到我,说 页面在滑动的时候,输入框也会跟着上下滑动,而这个问题只在ios系统上出现,Andr...
  • 上下左右拉动橡皮筋效果 之前就看了一点关于阻尼效果的,也尝试了一下在ListView上加个HeaderView呈现阻尼效果 ListView添加阻尼效果的HeaderView 当时的思路是:下拉的时候改变图片控件的LayoutParams,然后设置...
  • $(document).ready(function(){ function stopScrolling( touchEvent ) { touchEvent.preventDefault(); } document.addEventListener( 'touchstart' , stopScrolling , false ); document.addEventListen
  • H5移动端ios 滚动优化

    2017-07-16 22:40:07
    H5页面内去除弹性滚动。 表格第一行和第一列固定 其他区域滚动 常用做法: 利用css3 的动画 利用ios 特有属性 -webkit-overflow-scrolling : touch 那么问题来了,如果用好这两个点呢?自己写的代码太烂,还是...
  • 目前尚兼容性不好 文章摘自:... overscroll-behaviorCSS 属性是overscroll-behavior-x和overscroll-behavior-y属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边...
  • 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是:(1) 看是否能把body和html的height: 100%去除掉。...
  • 1.解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题? 首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是: (1) 看是否能把 body 和 html 的 ...
  • 建议先看这篇文章 (-webkit-overflow-scrolling:touch) ... 问题复现: 由非滚动区域向滚动区域滑动,再迅速滑动滚动区域,此时滚动会出现bug 在一个可上下滑动的区域,滚动条在最上面再向上滑动或滚动条在最下面再...
1 2 3 4
收藏数 65
精华内容 26