ajax加载页面iscroll失效,scrollOverflow不起作用 在第一页就不动了？求助

最新推荐文章于 2022-12-07 11:40:49 发布
最新推荐文章于 2022-12-07 11:40:49 发布
阅读量316 收藏
点赞数
文章标签： ajax加载页面iscroll失效

scrollOverflow不起作用 在第一页就不动了。用滚动轮不好使，用键盘可以慢吞吞往下滑

代码：

FullPage

body{color: #ffffff;}

.section1{background-color: #0e9742;}

.section2{background-color: #971740;}

.section3{background-color: #b7dd3f;}

.section4{background-color: #2b5b97;}

.slide{text-align: center;}

这是第一屏

slide1
slide2
slide3
slide4

这是第三屏

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是一段超级长的段落这是一段超级长的段落

这是第四屏

$(document).ready(function(){

$('#fullPage').fullpage({

sectionsColor:['#0e9742','#971740','#b7dd3f','#2b5b97'],

//resize:true,

//continuousVertical:true,

//navigation:true,

//navigationPosition:'right',

//navigationTooltips:['page1','page2','page3','page4'],

//showActiveTooltip:true,

//slidesNavigation:true,

//slidesNavPosition:'top',

scrollOverflow:true

});

})

刘莉旻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iscroll动态加载数据完美解决方法
08-29
主要为大家详细介绍了iscroll动态加载数据的完美解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
fullpage使用 scrollOverflow:true 时隐藏或者惰性加载时iscroll 获取高度不对问题
weixin_34161064的博客
07-25 1138
2019独角兽企业重金招聘Python工程师标准>>> ...
fullPage.js插件使用了scrollOverflow：true;这个参数是在ie浏览器中滚动不翻页的兼容问题...
chuqianji3514的博客
07-10 1376
由于开发的页面中最后一屏的内容要比其他每屏的内容要多了很多，所以这时就需要对最后一屏进行裁剪使用滚动的方式来展示。所以fullPage这个插件提供了一个参数进行裁剪scrollOverflow：true； 一开始我添加完成之后还是挺好的，但是后来在ie浏览器上打开就出现问题了，在ie上这个参...
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题...
sfkong31893189的博客
01-15 1129
web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden...
overflow ： scroll 溢出的 要滚动
weixin_38722500的博客
07-24 2173
overflow :  scroll      <meta  name="viewport“    content = " width = device-width ,   initial-scale=1.0 , maximum-scale=1.0, user-scalable=0"> 是  让当前  viewport  的宽度  等于 设备的宽度   ::-webkit-...
iscroll5.2.0--页面下拉刷新，上拉分页加载
10-10
基于iScroll5.2.0实现页面下拉刷新和上滑加载效果, 代码简洁, 功能齐全, 方便二次开发
iscroll.js滚动加载实例详解
10-19
主要为大家详细介绍了iscroll.js滚动加载实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
H5基于iScroll实现下拉刷新和上拉加载更多
08-29
主要为大家详细介绍了H5基于iScroll实现下拉刷新和上拉加载更多效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果
weixin_30421525的博客
07-15 395
参考链接：https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search。 */ 转载于:https://www.cnblogs.com/Neilisme/p/9314741.html
带你跳出DIV内overflow：scroll的坑
Jour的博客
09-18 1万+
-webkit-overflow-scrolling: touch
overflow: scroll隐藏滚动条的问题
热门推荐
sinat_25017107的博客
07-15 5万+
最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题。对于隐藏滚动条，我们最常用的方法首先是：1、使用以下CSS可以隐藏滚动条：.container::-webkit-scrollbar {display:none}但是要兼容其他浏览器的话这个就不太好用了，这个适用于Chrome2、为了兼容其他的浏览器，可以用这样的方法：在滚动区域外再套一层div，给这层div设置overflow:...
overflow：scroll滚动条可以拉但是不能滚动
君兮的博客
12-07 2639
overflow：scroll滚动条可以拉但是不能滚动
iscroll不能滑动的一个原因
maohuihua的专栏
05-11 5818
今天在做项目时，碰到一个很蛋疼的问题。iscroll不能滑动。iscroll的高度始终为0. 开始以为是加载的问题。在dom初始化完毕之前，初始化了wrapper，后来发现不是。 网上有文章说，是wrapper的高度要小于iscroll的高度才行，我试了一之后，发现还是不能滑动。 最后一个大牛帮我解决了，是iscroll中的table的样式position设为了absolute，脱离了文档流
使用iscroll插件没有滚动效果
Hgh_1997的博客
09-11 488
起因:由于图片是网络上的图片，服务器那边获取的，不是本地资源，所有得要看用户的网速 原因:因为图片还没加载好，就开始渲染插件了，会导致父元素没有高度，即不能滚动 解决：等获取到所有图片并且加载好之后再去渲染插件的初始js           1.获取所有图片            2.使用load事件，资源加载完成 如：以下代码的基本操作 var conms = $(".right ...
使用iscroll，无法正常滑动的原因
weixin_30363981的博客
09-13 695
iscroll的dom元素的结构是固定的，swiper是容器，scroll是需要滚动的容器，list是滚动的内容 <div class="swiper"> <div class="scroll"> <div class="list"></div> </div> </div> ...
ajax加载页面iscroll失效,javascript,_使用iscroll 底部被遮住（异步加载DOM造成的高度问题造成iScroll不能滚动）怎么解决，javascript - phpStudy...
weixin_29701553的博客
08-06 389
使用iscroll 底部被遮住(异步加载DOM造成的高度问题造成iScroll不能滚动)怎么解决$(document).ready(function () {App.Current = {Page: {PageAt: 1,PageCount: 3,reset: function () {this.PageAt = 1;}}};function initScroller() {var pullDow...
使用iscroll的问题与解决办法
YZi_Angel的专栏
11-24 1582
我们都知道，当列表里数据有很多的时候，我们会考虑将其分为很多条小数据，然后通过滑动事件触发ajax请求数据，然后将数据替换到页面中进行渲染。通常，我们都会考虑使用iscroll插件，但是使用的同时又会出现很多的问题。如下： a)、每个列表上都有一个a链接，但是，当点击的时候没有任何反应。 一开始我们可能考虑是上边有覆盖层，当点击页面的时候，不能捕获a标签，但是给其的z-index调大，还是不能
iScroll实现上拉加载下拉刷新
最新发布
05-30
iScroll 可以很方便地实现上拉加载和下拉刷新，下面是一个简单的示例代码： ```html <div id="wrapper"> <div id="scroller"> <ul> <li>1</li> <li>2</li> <li>3</li> ... </ul> </div> <div id="pullDown"> <span>下拉刷新</span> </div> <div id="pullUp"> <span>上拉加载更多</span> </div> </div> ``` ```javascript var myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true, scrollbars: true, fadeScrollbars: true, interactiveScrollbars: true, shrinkScrollbars: 'scale', click: true, pullDownRefresh: true, pullUpLoad: true }); // 下拉刷新 myScroll.on('scroll', function() { if (this.y > 30) { $('#pullDown span').html('松开刷新'); } else { $('#pullDown span').html('下拉刷新'); } }); myScroll.on('scrollEnd', function() { if (this.y > 30) { // 执行下拉刷新操作 setTimeout(function() { myScroll.refresh(); }, 1000); } }); // 上拉加载 myScroll.on('scroll', function() { if (this.y < (this.maxScrollY - 30)) { $('#pullUp span').html('松开加载'); } else { $('#pullUp span').html('上拉加载更多'); } }); myScroll.on('scrollEnd', function() { if (this.y < (this.maxScrollY - 30)) { // 执行上拉加载操作 setTimeout(function() { myScroll.refresh(); }, 1000); } }); ``` 上面的代码中，我们在 iScroll 的配置中开启了 `pullDownRefresh` 和 `pullUpLoad` 两个选项，然后监听 `scroll` 和 `scrollEnd` 事件，根据滚动的位置来判断是否需要触发下拉刷新或上拉加载操作。在触发操作后，我们可以通过 setTimeout 来模拟异步加载数据的过程，然后调用 `myScroll.refresh()` 来更新 iScroll 的状态。这样就可以实现简单的上拉加载和下拉刷新功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值