iScroll滚动衔接浏览器原生滚动

最新推荐文章于 2020-07-10 07:31:30 发布
最新推荐文章于 2020-07-10 07:31:30 发布
阅读量1.9k 收藏
点赞数
分类专栏： 移动Web开发 文章标签： iScroll 系统滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanjunspirit/article/details/9360563
版权

在使用iScroll做滚动效果时可能会遇到一个问题。


本来页面是这样的，其中下面部分是用iScroll做的滚动，这没有什么问题。



但是如果万一被系统滚动到了下面（弹软键盘等操作都会导致页面无意间滚到下面，隐藏掉地址栏，甚至将iScroll的滚动区域隐藏掉一半）




由于iScroll的滚动会覆盖掉系统的滚动，在iScroll的滚动区域内无论怎么划都不会再能够回去了。


所以这里必须判断在iScroll滚动到尽头仍在往尽头方向滚动的时候，不要禁用系统滚动。


onBeforeScrollStart : function(){},//禁用系统滚动在下面控制
最低0.47元/天 解锁文章
junhan-韩俊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iscroll实现滚动
商林松的博客
04-12 1383
简述：iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚
iscroll块遇到原生滑动不能滑
zerofine的专栏
01-16 1321
这种情况是因为iscroll屏蔽了原生的操作使用了event.preventDefault();所以我们可以针对这个判断是否需要调用这个方法，在iscroll源码里可以找到_start和_move防范，里面都有event.preventDefault() _start方法： _move if ( this.options.preventDefault ) { // increases per
iscroll4中滑动页面触发点击事件
nobug12138的博客
04-13 1133
找到iscroll.js中： if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) 修改为： if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEX
横向iscroll阻止纵向浏览器滚动条
qq_41981057的博客
12-29 316
在初始化iscroll时设置： var myScroll= new IScroll('.container', { // mouseWheel : true, //鼠标滚轮支持 // scrollbars: false, //滚动条支持 scrollY: false, //滚动方向（垂直） scrollX: true, //滚动方向（水平） bounce: true, /...
Better-Scroll组件解读
Abner 的博客 (:
01-05 8733
介绍 Better-Scroll 组件的使用 描述：这是一篇介绍移动端使用 Better-Scroll 库的文章。
原生js仿浏览器滚动条效果
10-20
仿浏览器滚动条 *{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;} p{padding:5px 20px 5px 5px;font-size:26px;position...
iscroll.js滚动加载实例详解
10-19
iscroll.js通过优化滚动性能，使得在移动设备和桌面浏览器上都能流畅地处理大量的内容加载，避免了一次性加载大量数据导致的页面卡顿问题。 首先，我们来看一下iscroll.js滚动加载实例的基本HTML结构。在这个例子中...
基于iScroll实现内容滚动效果
08-27
基于iScroll实现内容滚动效果是一种常见的技术，特别是在开发Web App时，为了实现类似原生应用的流畅滚动体验。iScroll是一款强大的JavaScript滚动插件，它能够提供诸如滚动、缩放、拉动刷新和自定义滚动条等多种...
iscroll触屏滚动
11-04
2. **自定义滚动条**：iscroll允许开发者自定义滚动条的样式和行为，这在原生浏览器中通常难以实现。 3. **多方向滚动**：iscroll支持横向和纵向滚动，可以根据布局需求轻松切换。 4. **下拉刷新和上拉加载**：...
iscroll移动app滚动分页demo
07-08
在移动应用中，iscroll常用于替代原生的滚动行为，因为它能更好地控制滚动效果，特别是在处理复杂布局时。 下拉加载更多（也称为无限滚动或自动加载）是一种常见的网页和App设计模式，用户在滚动到页面底部时，新...
点击锚点链接时页面滚动的特效(Javascript Smooth Scroll)
03-18
NULL 博文链接：https://justcoding.iteye.com/blog/598481
关于 IScroll5 和IScroll4 的一些用法
好好学习
01-26 7569
最近做滚动效果，用到IScroll，当然就直接使用IScroll5了，在移动端用的iscroll-lite，轻而小但是 没翻页无限加载的功能      主要是 用到了在IScroll 里面在嵌入 一个IScroll  ，在IScroll4 里还是有决绝的办法，IScroll5就无能为力了(ps:应该有办法，只是本人没找到)，最后只把两个IScroll 做为同一级的元素，实现的。 iScrol...
滚动链接导航
aibusi2584的博客
11-15 97
上滚动链接导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <...
iScroll局部使用，使浏览器滑动失效
我给媳妇儿讲java
03-30 6346
原文iScroll 是非常常用的一个开发移动版页面的插件，但是在使用过程中我们发现如果在页面的局部区域使用了iScroll，那么在这个区域不管怎么滑动，iScroll区域可以滑动但是整个页面却是不会滑动了的，查看源码可以发现iScroll的bug所在Default options中onBeforeScrollStart: function (e) { e.preventDefault(); },问题
基于iScroll实现内容滚动
崔昕阳的博客
03-20 1542
一、iScroll简介 iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。 官网地址：http://iscrolljs.com/ 二、iScroll使用方法 1.iScroll使用...
iScroll左右滑动阻止内容上下滑动 e.preventDefault() 解决办法
对代码不满足，是任何真正有天才的程序员的根本特征。
08-28 8405
最近写了一个下拉加载（新闻列表页面和详情页面在同一个页面）这个事件真的让我调试了很久，才找到了原因 问题:页面下拉不了 window.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 1:在onBeforeScrollStart: function (e) { e.preve
锚链接跳转+滚动效果
redaiyuqun的博客
11-23 1912
//-----(锚链接下面为效果js)- $('#j-jump-to-save-btn').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; });上面是
iScroll4.2.5中的无法滑动或点击的解决方案（转）
weixin_34080903的博客
01-08 624
又见iScroll问题，特别是三星手机和iPhone，顺便提一句，现在的项目中他们给div加了height属性来解决不能滚动问题，个人认为是个非常愚蠢的解决方案，我必须使用media query来解决随之而来的不同手机有不同高度问题，既不能适应所有手机，万一将来有了新手机型号，也会发生问题。不过他们是公司专门雇佣的顾问和专家，我也没辙。 转载自： http://www.websqq.org/ar...
滚动链接动画
CSS 初学者指南
07-10 123
向下滚动到某个点，现在您想要以某种方式设置样式。 标头变为固定。 动画触发。 出现目录。 要基于滚动位置执行任何操作，现在需要JavaScript。 您可以通过DOM事件查看滚动位置，并根据该位置更改元素的样式。 或者，如果可以的话，最好使用IntersectionObserver 。 我们只是在博客上写过这一切。 现在有一个新的（非正式的）规范试图将这些可能性引入CSS。 当Web标准介...
iScroll5中文API详解：高性能滚动插件
iScroll5不仅提供基本的滚动功能，还能实现缩放、平移、无限滚动、视差滚动和旋转等交互效果，所有这些只需引入大约4kb的代码库。 ### iScroll5的核心特性： 1. **高性能**：iScroll通过持续优化，确保在各种新旧...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值