iscroll页面滚动条重新定位的问题,高手请进-CSDN论坛

CSDN论坛 > Web 开发 > JavaScript

iscroll页面滚动条重新定位的问题,高手请进 [问题点数：50分，结帖人reyoreyoreyo]

⋅iscroll页面滚动条重新定位的问题,高手请进 ⋅java中四舍五入——double转BigDecimal的精度损失问题 ⋅java实现在线浏览zip文件及文件下载 更多帖子 关注空间博客 reyoreyoreyo 本版专家分：19 结帖率 92.86%

<!DOCTYPE html>

<html>



<head>

    <meta charset="utf-8">

    <title>rrr</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style type="text/css">

        * {

            margin: 0;

            padding: 0

        }



        .herder_radius {

            position: relative;

            width: 100%;

            background: #ccc;

        }



        .herder_text {

            position: absolute;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            margin: auto;

        }



        .herder_name {

            position: absolute;

            width: 80px;

            height: 80px;

            border-radius: 50%;

            left: 0;

            top: 0;

            right: 0;

            margin: auto;

            background: red;

            text-align: center;

            line-height: 80px;

            font-weight: bold;

            font-size: 50px;

            -webkit-font-smoothing: antialiased;

            font-family: '微软雅黑';

            color: #fff;

            white-space: nowrap;

            overflow: hidden;

        }



        .content_box {

            width: 100%;

            background: #fff;

            position: absolute;

            top: 200px;

            bottom: 0px;

            left: 0;

            overflow: hidden;

        }



        .herder_namefn {

            text-align: center;

            margin-top: 80px;

        }

    </style>

</head>



<body>

    <div class="herder_radius" dataHeight="200">

        <div class="herder_text">

            <div class="herder_name">Re</div>

            <div class="herder_namefn">测试程序</div>

        </div>

    </div>

    <div class="content_box" id="wrapper">

        <div>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>

            <p>测</p>

            <p>试</p>

            <p>程</p>

            <p>序</p>

            <p>博</p>

            <p>客</p>



        </div>

    </div>

    <script src="http://sms.reyo.cn/include/aa/jquery.min.js"></script>

    <script src="http://sms.reyo.cn/include/aa/iscroll-probe.js"></script>

    <script>

        (function ($) {

            let herder_radiusH = $('.herder_radius').attr('dataHeight');

            let herder_radiusT = $('.content_box').offset().top;

            let windowH = $(window).height();

            $('.herder_radius').height(herder_radiusH);

            $('.content_box').height(windowH - herder_radiusH);

            let herder_text = 0;

            $(".herder_text>div").map(function () {

                herder_text += parseInt($(this).height());

            })

            $('.herder_text').height(herder_text)

            window.magnify = function (option) {

                let myScroll = new IScroll('#wrapper', {

                    probeType: 3,

					scrollbars: true,

					interactiveScrollbars: true,

					shrinkScrollbars: 'scale',

					fadeScrollbars: true,

                    mouseWheel: true

                });

                myScroll.on('scroll', updatePosition);

                myScroll.on('scrollEnd', updatePosition);



                function updatePosition() {

                    let scrollH = this.y >> 0;

                    let radiuSscrollH = $('.herder_radius').height()

                    if (herder_text + scrollH > 0) {

                        let scale = scrollH / herder_radiusH + 1

                        $('.herder_text').css({

                            'transform': 'scale(' + scale + ')'

                        })

                        $('.herder_radius').css({

                            'height': Number(herder_radiusH) + scrollH,

                        })

                        $('.content_box').css({

                            'top': herder_radiusT + scrollH,

                            'height': windowH - herder_radiusH - scrollH

                        })

                    }

                }

            }

        })(jQuery)

        new magnify();

    </script>

</body>



</html>

问题当拉到的时候总是滚动不到最下面，不知什么地方出错了，望大神出手！！！谢谢

0 2018-06-28 16:34:35

回复数 8 只看楼主引用举报楼主

reyoreyoreyo 本版专家分：19: 自己顶一下｜｜｜

0 2018-06-30 09:00:22

只看TA 引用举报 #1 得分 0

Iscroll absStartX:0 absStartY:-58 directionLocked:0 directionX:0 directionY:1 distX:-18.570999145507812 distY:44.2860107421875 enabled:true endTime:1534690677086 hasHorizontalScroll:fals...

⋅wpf 如何画出多个CheckBox ⋅项目全程new操作有无影响？ ⋅怎么打开jTessBoxEditor的图形界面，为什么没有exe文件？ 更多帖子 关注空间博客 Logerlink 本版专家分：2405: 你的网站不能访问跑不起来

0 2018-06-30 10:44:46

只看TA 引用举报 #2 得分 0

iScroll.js快速使用参考 http://caibaojian.com/iscroll-5/ 初始化及使用插件的引入在这就不过多阐述了，基本就是下载插件的js文件，通过script引入。

⋅谁讲的“能用JS改写的终将用JS改写”？ ⋅开源有哪些注意事项？ ⋅【分享+散分】动态(gif)、静态图片转换成DataURL(base64编码)格式 更多帖子 关注空间博客 ambit_tsai-微信 本版专家分：6176 银牌 2018年6月总版技术专家分月排行榜第二 红花 2018年7月 Web 开发大版内专家分月排行榜第一 2018年6月 Web 开发大版内专家分月排行榜第一

调整尺寸后，需要通知iScroll重新计算一下



function updatePosition() {

	/* 代码块 */

	

	myScroll.refresh();  // 调用refresh方法

}

0 2018-06-30 10:58:07

只看TA 引用举报 #3 得分 40

关于IScroll多个方向滚动 IScroll的坑之前没有接触过Iscroll这个框架，但是在维护一个项目，项目中前端页面使用到iscroll了。本着对所掌握的框架的了解，觉得使用起来应该不是很难。有这么一个功能，页面原本是上下滚动的，然后我需要在页面顶部加一个横向滚动的导航原先的dom &amp;lt;section id=“page”&amp;gt; &amp;lt;div class=&quot;scroller&quot; &amp;gt; 内容···

⋅wpf 如何画出多个CheckBox ⋅项目全程new操作有无影响？ ⋅怎么打开jTessBoxEditor的图形界面，为什么没有exe文件？ 更多帖子 关注空间博客 Logerlink 本版专家分：2405: 程序刚开始是没有问题的
不过当视口调整（高度变大）的时候，此时IScroll作用的区域保持不变（高度没变），所以底部就会出现空白

0 2018-06-30 11:31:35

只看TA 引用举报 #4 得分 0

IScroll - 踩过的坑官方地址：http://iscrolljs.com/ var wrapper = new IScroll("#wrapper") 这一步必须是在元素已经渲染完成之后进行，否则页面会报错如果是用框架比如vue渲染的数据列表，当列表变化是，wrapper必须执行一下刷新事件： wrapper.refresh(); 如果是点击tab栏切换了wrapper的内容，则必须在点击之...

⋅wpf 如何画出多个CheckBox ⋅项目全程new操作有无影响？ ⋅怎么打开jTessBoxEditor的图形界面，为什么没有exe文件？ 更多帖子 关注空间博客 Logerlink 本版专家分：2405

将高度重新调整就可以了



<script>

        (function ($) {

        	/*let dataObj ={

        		herder_radiusH ,

        		herder_radiusT,

        		windowH,

        		herder_text

        	}*/

            let dataObj = init();

            $(window).resize(function(){

            	dataObj = init();

            })

            window.magnify = function (option) {

                let myScroll = new IScroll('#wrapper', {

                    probeType: 3,

                    scrollbars: true,

                    interactiveScrollbars: true,

                    shrinkScrollbars: 'scale',

                    fadeScrollbars: true,

                    mouseWheel: true

                });

                myScroll.on('scroll', updatePosition);

                myScroll.on('scrollEnd', updatePosition);

                function updatePosition() {

                    let scrollH = this.y >> 0;

                    if (dataObj.herder_text + dataObj.scrollH > 0) {

                        let scale = scrollH / dataObj.herder_radiusH + 1

                        $('.herder_text').css({

                            'transform': 'scale(' + scale + ')'

                        })

                        $('.herder_radius').css({

                            'height': Number(dataObj.herder_radiusH) + scrollH,

                        })

                        $('.content_box').css({

                            'top': dataObj.herder_radiusT + scrollH,

                            'height': dataObj.windowH - dataObj.herder_radiusH - scrollH

                        })

                    }

                }

            }

        })(jQuery)

        new magnify();

        function init(){

        			let herder_radiusH = $('.herder_radius').attr('dataHeight');

		            let herder_radiusT = $('.content_box').offset().top;

		            let windowH = $(window).height();

		            $('.herder_radius').height(herder_radiusH);

		            $('.content_box').height(windowH - herder_radiusH);

		            var herder_text = 0;

		            $(".herder_text>div").map(function () {

		                herder_text += parseInt($(this).height());

		            })

		            $('.herder_text').height(herder_text);

		            let dataObj ={

		        		herder_radiusH: herder_radiusH,

		        		herder_radiusT: herder_radiusT,

		        		windowH: windowH,

		        		herder_text: herder_text

		        	}

		            return dataObj;

				}

</script>

0 2018-06-30 11:32:13

只看TA 引用举报 #5 得分 10

reyoreyoreyo 本版专家分：19: 可以访问了，再帮忙看看！谢谢

0 2018-06-30 15:25:33

只看TA 引用举报 #6 得分 0

iscroll 使用同个wrapper多状态数据切换重新定位到顶部问题：移动端同个页面，有个状态导航栏（几种状态）切换请求数据操作同一个wrapper里面的数据。不同状态切换过程中，新的状态如果数据量多《无法自动回滚到顶部》。 html代码结构：下拉刷新... 下拉刷新... 已经看到最后解决方法：切换时先执行原数据回滚到顶部操作，再延迟执行数据请求： myScroll.

⋅iscroll页面滚动条重新定位的问题,高手请进 ⋅java中四舍五入——double转BigDecimal的精度损失问题 ⋅java实现在线浏览zip文件及文件下载 更多帖子 关注空间博客 reyoreyoreyo 本版专家分：19

引用 5 楼 Logerlink 的回复:

将高度重新调整就可以了



<script>

        (function ($) {

        	/*let dataObj ={

        		herder_radiusH ,

        		herder_radiusT,

        		windowH,

        		herder_text

        	}*/

            let dataObj = init();

            $(window).resize(function(){

            	dataObj = init();

            })

            window.magnify = function (option) {

                let myScroll = new IScroll('#wrapper', {

                    probeType: 3,

                    scrollbars: true,

                    interactiveScrollbars: true,

                    shrinkScrollbars: 'scale',

                    fadeScrollbars: true,

                    mouseWheel: true

                });

                myScroll.on('scroll', updatePosition);

                myScroll.on('scrollEnd', updatePosition);

                function updatePosition() {

                    let scrollH = this.y >> 0;

                    if (dataObj.herder_text + dataObj.scrollH > 0) {

                        let scale = scrollH / dataObj.herder_radiusH + 1

                        $('.herder_text').css({

                            'transform': 'scale(' + scale + ')'

                        })

                        $('.herder_radius').css({

                            'height': Number(dataObj.herder_radiusH) + scrollH,

                        })

                        $('.content_box').css({

                            'top': dataObj.herder_radiusT + scrollH,

                            'height': dataObj.windowH - dataObj.herder_radiusH - scrollH

                        })

                    }

                }

            }

        })(jQuery)

        new magnify();

        function init(){

        			let herder_radiusH = $('.herder_radius').attr('dataHeight');

		            let herder_radiusT = $('.content_box').offset().top;

		            let windowH = $(window).height();

		            $('.herder_radius').height(herder_radiusH);

		            $('.content_box').height(windowH - herder_radiusH);

		            var herder_text = 0;

		            $(".herder_text>div").map(function () {

		                herder_text += parseInt($(this).height());

		            })

		            $('.herder_text').height(herder_text);

		            let dataObj ={

		        		herder_radiusH: herder_radiusH,

		        		herder_radiusT: herder_radiusT,

		        		windowH: windowH,

		        		herder_text: herder_text

		        	}

		            return dataObj;

				}

</script>

非常感谢，可你这样一改代码效果完全没有了！再帮忙看一下。我源码是有动态效果的

0 2018-06-30 15:35:57

只看TA 引用举报 #7 得分 0

iscroll开发多层滚动嵌套 iscroll开发多层滚动嵌套 iscroll设置滚动典型的结构为复制代码 ... 复制代码 wrapper作为滚动的外层容器它的大小为屏幕上看到的区域大小大小可以随便设置如果高度等于scroller的高度则水平滚动否则垂...

引用 3 楼 ambit_tsai 的回复:

调整尺寸后，需要通知iScroll重新计算一下
function updatePosition() {

	/* 代码块 */

	

	myScroll.refresh();  // 调用refresh方法

}

厉害就差了这一句！！！非常感谢！！

0 2018-06-30 15:37:34

只看TA 引用举报 #8 得分 0

收藏帖子

iscroll部分机型高度计算错误原因--transform属性: iscroll在部分手机上做下拉刷新的时候，高度会计算错误，显示为顶部部分高度被隐藏。当时使用版本是4.2.2。通过调试发现是iscroll源码的bug，在此Mark下，懒得提交Issue。 iscroll4均有这个错误，在iscroll5里面已改正，但是只是在计算高度时做了防御式编程，根本原因估计还是没找到。图方便可以直接使用iscroll5,只是api变了。不想升级，可以按我的方式稍微修改下

iscroll输入内容时发生移位的处理: 使用iscroll滚动，假如要输入内容时输入框被键盘挡住了，输入内容后页面会向上移位，关闭键盘后移位不会复原，以下方法可以让移位的页面复原。var is = new iScroll(id)；//初始化对象 $(window).resize(function() { if(is) { is.scrollTo(0, 0); $("#id&gt;div").offset({"...

iscroll.js的简单使用方法（总结）: 原文链接：http://caibaojian.com/iscroll-js.html这篇文章讲到了iscroll的一些使用入门、参数配置和示例，并讲到了滚动条的接口，自定义事件和销毁动作等。原文：iscroll.js的使用入门Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。尽可能保持DOM结构的简洁。...

iscroll原理: 做过移动端开发的应该多少听过iscroll，iscroll是用来模拟移动端滚动效果的库iscroll的出现移动app的布局一般是顶部header+固定高度内容区+footer这种需求在PC端很简单，header、footer用固定定位，content设置上下margin和overflow:scroll，就ok了，木有啥问题但是在移动端，首先关于position:fixed，这篇文章对于fixed属...

Web前端学习笔记——iScroll: 版本针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。目前我们有以下版本： iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。 iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版是又小又...

iscroll-5.1.3: iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iscroll5.2.0文件下载: IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。尽可能保持DOM结构的简洁。iScroll使用硬件

iscroll分页滚动（加回到顶部）: iscroll.js下拉滚动刷新demo 新增 1：回到顶部效果； 2：底部悬浮显示当前页数与总页(例1/5)；

iScroll5下拉刷新的完美解决: 因为项目需要，最近使用了iScroll5,但是发现无论如何都不能完美的实现下拉刷新效果。仔细检查了下，发现iScroll5中当重置位置的时候，如果当前Y坐标大于0，则固定滚动回0，无法动态设置。那么我们只需要进行一点简单的修改，就可以搞定这个问题。找到下面这个部分: this.maxScrollX = this.wrapperWidth - this.scrollerWidth...

隐藏的iscroll元素显示后不能滚动问题: 若需要使用iscroll的区域为隐藏，则需要在显示后再初始化iscroll，否则不能滚动。

移动端的 jquery——移动端滚动条插件iScroll.js API文档: http://www.tuicool.com/articles/NJJBzqm

iScroll 4 使用详解: 原文：http://cubiq.org/iscroll-4 iScroll终于迎来了一个彻底的重写。现在的效果比以往更平滑并且增加了一些新的特性：缩放、下拉式刷新、元素捕捉以及更多更高级别可编程性的自定义事件。项目信息最后一次代码更新：2012.07.14 – v4.2 设备兼容：iPhone/Ipod touch &gt;=3.1.1, iPad &gt;=3.2, Android ...

IScroll 无法上下滚动问题: 最近需要做一个移动端查看图片的需求，要求图片可以缩放，但是移屏又无法显示完整张图片，所以就需要上下滑动。但是遇到了一个奇怪点问题，即界面居然无法滑动，图片无法显示完全。后面仔细测试才发现问题的所在。其实原因很简单，在图片没有加载出来的时候我就初始化了iscroll，这样就会导致iscroll无法滚动，所以我们需要这样做 var img = document.getElementById("p

web移动端：iscroll实现局部滚动: 总结一下最近项目用到的一个功能点，具体要求如下： body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件。一开始项目是用touchmove模拟实现，后来决定尝试一下iscroll,碰巧在网上看到这篇文章在这篇文章中获益匪浅：http://www.cnblogs.com/star

iScroll5 使用问题集合: 1 不滚动通过API 及demo 可以知道，最简单滚动结构如下：约定：内层div 是指上述 .scrollBox 1 内容元素高度异常通过调试器调试会发现：IScroll 会计算，内层div 的容器的高度，当内层div 的高度没有正确感知其内容高度时，比如，上述内层div 采用绝对定位，高度自动，top.bottom均为0，：解决办法：让内层div

iScroll4 滚动到底部检测: iScroll4 滚动到底部检测

iscroll插件和关于滚动的问题: 原文地址: https://www.jianshu.com/p/e952eeca1160 iscroll的参数和方法说明 http://blog.csdn.net/sweetsuzyhyf/article/details/44195549 iscroll的初始化最佳的HTML结构： &lt;div id="wrapper"&gt; &lt;ul&gt; &lt;...

iscroll4中滚动条的去除: 在移动开发中，当做到上拉加载，下来刷新的时候遇到了各种各样的坑，把我坑的死去活来，我准备把我遇到的一些坑给总结下来，并且写下来，以供遇到同类问题的人可以找到解决的办法。 1、怎么去除iscroll4中的滚动条呢？答：打开iscroll.js文件，ctrl+f检索bar字段，找到这段代码，把所有的bar的样式全部注释，滚动条就消失了，这样一来，可以让手机端的页面看起来更加的舒服，当然，iscro

移动web 上下拉刷新，支持iscroll滚动内容和普通内容(没有滚动的)。。。: 效果图：主要代码： UpDownRefresh.css .UpDownRefresh_loading { width: 36px; height: 36px; border-radius: 50%; border: 5px solid white; border-left: 5px solid cyan; border-right: 5px solid cyan;...

浅谈在h5中的横向滚动的标题栏iscroll的运用（webapp）: 最实在，好用的iscoll实现顶部标签滚动

iScroll局部使用，使浏览器滑动失效: 原文iScroll 是非常常用的一个开发移动版页面的插件，但是在使用过程中我们发现如果在页面的局部区域使用了iScroll，那么在这个区域不管怎么滑动，iScroll区域可以滑动但是整个页面却是不会滑动了的，查看源码可以发现iScroll的bug所在Default options中onBeforeScrollStart: function (e) { e.preventDefault(); },问题

iScroll横向滚动区域无法拉动页面的解决方案: 重写onBeforeScrollStart事件，判断touch的滑动距离， new iScroll("scroll_red",{hScrollbar:false,vScrollbar:false,vScroll:false, onBeforeScrollStart: function ( e ) { if ( this.absDistX &gt; (thi...

关于iscroll滚动插件，在iOS下面，上拉之后无法回弹的问题: 关于iscroll滚动插件，在iOS下面，上拉之后无法回弹的问题场景：项目运用iscroll做分页，发现在ios上面上拉，只要手指碰到native 的导航之后就发现页面无法会弹解决思路：判断页面手指滚动靠近页面可视区域就让其回弹if((this.y < this.maxScrollY) && (this.pointY < 1)){ this.scrollTo(0, this.maxScrollY,

解决滚动条定位: js中获取当前位置： function ScollPostion() { var t,l; if (document.documentElement && document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = documen

iscroll在谷歌浏览器中局部滑动失效: 今天在用 iScroll.js 做移动端的下拉刷新和上拉加载功能时，在谷歌浏览器进行调试时，发现无法正常使用，用鼠标拉动时，滑动不起来，指定区域只能移动4px而已，这明显不正常，（在firefox上测试又是正常的，不用手机模式也是可以滑动的）仔细调试了好久，才发现问题所在，简单来说就是谷歌浏览器的统一指针事件所致那么，谷歌该如何操作移动端的iScroll.js呢？1.代码实现（推荐）： //获取所...

iscroll.js 异步加载数据，底部显示不全的问题: 在异步加载成功后，加上myScroll.refresh();（重新计算高度）例子：

在IOS系统上，滚动条滚动到指定的位置出现空白页面的解决方案: 原因： -webkit-overflow-scrolling:touch 解释：由于使用-webkit-overflow-scrolling这个属性，苹果手机会使用硬件加速，从而促使页面滑动得更加流畅，然而也导致了页面出现空白的情况。解决办法：滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。

iscroll.js参数设置及API: 参数设置核心库croe 属性名说明默认值 options.useTransform 是否使用 CSS3 的 Transform 属性 true options.useTransition 是否使用 CSS3 的 Transition 属性，否则使用 requestAnimationFram 代替 true options.HWC...

IScroll5 参数说明和调用方法: IScroll.js 最新版本 v5.1.2 修复了输入框无法输入和横向滚动时无法上下滚动页面的问题 var myScroll = new IScroll('#wrapper', { disableMouse: true, disablePointer: true }); 官网：http://iscrolljs.com github： https://gith

关于移动iscroll项目中使用的一些坑: 1、iScroll v4.2及以下版本，在安卓手机中会有一些滑动不流畅，快速滑动时候，突然再次点击滑动，会有闪屏现象出现，更换iScroll v4.2.5及以上版本即可解决； 2、利用ajax进行数据交互的时候，当接口数据返回少于单页长度或为零的时候，刷新页面或者首次上拉或下拉滑动触发加载数据的时候，会请求两次接口数据，而且还是分第一页和第二页进行请求接口数据的，解决方法，封装ajax方法，定义

IScroll的使用（在vue中）: 1、下载iscroll 2、在需要用到的组件中引入：要用-probe才有onscroll事件 import iScroll from '../../static/js/iscroll-probe.js' 3、使用（1）html元素 &lt;div class="goods-mume"&gt; &lt;ul&gt; &lt;li class="mume-item border-...

新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置: 新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置（适用于排序后的数据）。一、通过设置滚动条到顶端的距离来控制滚动条的位置。代码如下： var tableHeight = $("#articletable tbody").height();//获取当前表格tvody的高度,articletable 为table的ID SetScrollTop(tableHeight); //控制...

nicescroll.js滚动条错位: 不知道为啥，在用fullpage做全屏滚动的时候，调用nicescroll.js的滚动条，会出现滚动条错位，百度了也发现解决办法万般无奈，测试了好久才发现解决办法：要将id为box的div（看截图，也就是父div）设置position:absoulte再看滚动条位置，这回正常了...

iScroll 实例：下拉刷新，滚动翻页: iScroll基本信息 1.最优的使用iScroll的结构如下所示： &lt;div id="wrapper"&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; ..... &lt;/ul&gt; &lt;/div&gt; 这个例子中，ul标签将会被滚动。iScroll一定要与

iScroll5横向滚动: 导航栏使用iScroll5横向滚动后，发现导航栏不可以滚动

vue进入页面时滚动条始终在底部: mounted () { this.scrollToBottom(); }, //每次页面渲染完之后滚动条在最底部 updated:function(){ this.scrollToBottom(); }, methods:{ scrollToBottom: function () { this.$nextTick(() =&gt; { var contain...

Iscroll 4 同一页面中,能够滚动上下并且左右同存效果,(滑动时很飘)解决办法(2): 需要改动Iscroll原代码. 找到这一行的注释: Lock direction 锁定方向改成 // Lock direction 锁定方向 if (that.options.lockDirection) { //横向比纵向多5个点，就算横向？改成：2倍 + 5 大约 75度以上才算横向移动 if (that.absDistX > that.absDistY *2

关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题: 关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题

网页刷新或者重新加载后滚动条的位置不变: "text/javascript"> window.onbeforeunload = function(){ var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typ

移动端视图滚动到指定位置的方法: 移动端视图滚动到指定位置的方法 pannel.scrollIntoView(true); pannel.scrollIntoViewIfNeeded();

Iscroll4 实现横竖左右滚动,滑动效果比拟andriod原生.: 之前做了一个滚动效果,但是滚动时比较飘.经过这几天仔细查找.总算有所收获.与大家一起分享.webapp滚动的tabpannel效果以后都可以用这个了. 网上找了一个代码,经过了一些修改. Wireless document.addEventLis

iscroll.js移动端滚动插件: iscroll.js移动端滚动插件

iscroll插件需要注意的问题: 1.使用iscroll插件的元素不能隐藏（display:none）

jquery每次初始化页面的时候滚动至头部: addEventListener("load", function () { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); }

iscroll实现滚动: 简述：iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚

IScroll 判断是否滚动到底部并加载更多数据: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=width=device-width, user-scalable=no, initi

移动端iScroll: 是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。 iScroll的最新版本是2011.07.03发布的4.1.7版。最新版比以往更顺畅，添加了更多的自定义事件，提供了更高级的可编程性。使用方法： DOM结构应尽量保持简洁，避免过多的嵌套。滚动区域为第一个子元素。html代码： ? 1

iOS使用Sencha Touch、ExtJs6 Modern或iscroll等框架时，文本框聚焦的光标不跟随页面(文本框)滚动的解决办法: 原文链接：为了弥补低端机器特别是安卓下原生滚动效果不流畅的情况，很多html5、js框架的滚动并不是原生的滚动，而是用touch事件和css3的transform样式模拟的。在iOS下，这种非原生的滚动，会导致文本框的光标不随着页面滚动，效果如下：解决办法：解决思想来自github上iscroll的一个issue：https://github.c

webapp滚动上下滑动加载数据: webapp 滚动条 上下滑动加载数据 iscroll

iScroll4解决ipad safari浏览器局部div滚动条单手指无法滑动问题: 第一步：引入iscroll.js 路径根据你自己的放置位置来设定第二步：定义div ... //任何你想滚动显示的内容严格遵守这样的结构！第三步：定义样式 #wrapper { width:580px; height: 748px

使用iscroll滑动区域内的div onclick事件单击一次触发了两次问题的解决: 这个问题是因为iscroll在判断滑动前,阻止了click事件,然后在滑动后,对原来的click事件进行了重构,一些设备上,比如你说的三星,并没有将默认的click阻止掉.所以,出现了类似双击的现象.好了,解释到此,给出解决方法: 更改iscroll.js文件搜索onBeforeScrollStart方法,将其中的preventDefault禁止掉搜索_end方法,将其中模拟click事

iScroll左右滑动阻止内容上下滑动 e.preventDefault() 解决办法: 最近写了一个下拉加载（新闻列表页面和详情页面在同一个页面）这个事件真的让我调试了很久，才找到了原因 问题:页面下拉不了 window.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 1:在onBeforeScrollStart: function (e) { e.preve

TreeView 滚动条 子节点定位页面回发刷新后，滚动条自动定位到被选择节点出，javascript库jQuery实现兼容服务器端控件: jQuery实现选择TreeView子节点，页面回送刷新后，滚动条自动回到TreeView顶部，而不是被选中节点处，对于数据量较大的系统而言是非常不方便操作的。实现单击TreeView节点，页面回发刷新后，滚动条自动定位到被选择节点处，使被选择节点可见 问题的阐述：由于网站嵌入代码很多javascript的不兼容导致js代码无效。模板页与服务器控件等的冲突。经过多次实验决定采用jQuery

使用iscroll的问题与解决办法: 我们都知道，当列表里数据有很多的时候，我们会考虑将其分为很多条小数据，然后通过滑动事件触发ajax请求数据，然后将数据替换到页面中进行渲染。通常，我们都会考虑使用iscroll插件，但是使用的同时又会出现很多的问题。如下： a)、每个列表上都有一个a链接，但是，当点击的时候没有任何反应。一开始我们可能考虑是上边有覆盖层，当点击页面的时候，不能捕获a标签，但是给其的z-index调大，还是不能

(仿锚点) 实现页面前进后退,重新加载 滚动条停留在原来的位置上: 处理机制是 cookie 和 onbeforeunload()方法的调用 window.onbeforeunload = function() { var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else i...

设置滚动条位置不对现象解决方案！！！: 设置滚动条：this.verticalScrollPosition = this.maxVerticalScrollPosition; 现象第一次设置的时候并没有到底下的位置，第二次才到。这是因为组件的更新并没有呗发现或者被通知到位，我们在调用这句话的前面加上validateNow()，这句话的意思是重新的验证下组件UICompent都有这个方法，验证后就可以正常的现实到最底下了！...

解决iscroll5的上拉下拉的回弹问题: 一般在项目的列表页中，经常会用到上拉加载下拉刷新这样的效果。一般加载的数据足够多的时候，用iscroll是可以实现这个没有问题，但是当数据少的时候，占不满一屏，如何用iscroll实现如下回弹效果。只需加上一句： min-height: 101%; 就行了。另网友建议的方法： height:calc(100% + 1px);// 不管屏幕多高，...

vue中实现移动端的scroll滚动: 一、首先安装安装npm install better-scroll --save二、并在组件中引用import BScroll from ‘better-scroll’template中引用指向将要滚动的DOM元素根据官方文档ref属性的说明，我们可以这样将DOM元素引用三、在methods中注册_initScroll方法，这个方法是对better-scroll的实例化，并且这个方法将来会在

页面中根据滚动条，显示返回顶部图标: 比较简单，直接记录代码 window.onscroll = function(){ if(document.body.scrollTop>10){ $('#go-top').show(); } if(document.body.scrollTop<=10

关于移动端用iscroll动画出现闪烁和迟钝(不流畅)的现象记录: 页面上所写的JS动画变的非常的卡，整个动画变的非常不流畅。百思不得其解。后查阅资料，发现iscroll官网有提到(参考地址)，这里指出了页面的闪烁，我们需要加上一个CSS属性

iscroll初始化以及横向滚动需要注意的一些坑: iscroll初始，以及横向滚动的坑

iScroll为什么这么卡: 为了做比较华丽的特效，手机页面经常会做滑动，估计有很多同学遇到了iScroll卡的问题，先来讲讲动画的实现（我也是从淘宝的一个技术分享那里看来的）。元素的定位： left/top 传统绝对定位计算CSS3 Transform 2dCSS3 Transform 3d 动画的组织方式： JavaScript (setInterval) /requestAnimationF

父页面带滚动条时，iframe的bootstrap模态框定位问题: 先获取父页面的滚动条位置 var scrolltop = window.parent.document.scrollingElement.scrollTop; 设置模态框的上外边局 $("#refundInfoDeatil").css({'margin-top': scrolltop});

微信开发安卓页面出现两个滚动条其中一条无法滚动可以采用局部区域滚动解决: 问题描述：图1.1是微信开发的一个页面，顶部有一个下拉选择菜单(自己写的组件)用于选择日期，选择之后会出现该日期下的数据记录，这时一个页面会出现两条滚动条(因为滚动条太丑，我用::-webkit-scrollbar {width: 0px;}将滚动条隐藏了，这里用红色线条标注出来)，苹果不会出现问题，安卓就会出现滚动不了下拉菜单的情况，一滚下拉菜单，整个页面都滚起来了。图1.1

页面重新加载后滚动条位置不变: &lt;script type="text/javascript"&gt; //重新加载后滚动条回到原来的位置 function window.onload() { var arr; //cookie中保存的有值，则将滚动条返回到原来的位置 if (arr = document.cookie.match(/scrollTop=([^;]+)(...

页面无法获取滚动条的高度: 页面无法获取滚动条的高度，值为0 虽然网上有很多解决无法获取滚动条的高度，正常来说只需要做个兼容即可：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop 这可以解决通常遇到的情况，但是我遇到的情况是，个别浏览器（搜狗浏览器、微信浏览器、小米自带浏览器）仍然无法获取滚动条的高度，值...

Nicescroll滚动条插件的用法: Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定义，支持触摸事件，可在触摸屏上使用。官网地址：http://www.areaaperta.com/nicescroll/ 引入核心文件，插件需要引入1.5.X以上版本的jquery库最简单的用法如下：

移动端弹出层滚动时禁止body滚动: 移动端弹出层滚动时禁止body滚动相信很多写移动端的朋友会遇到这个问题，我也遇到了，之后就辛辛苦苦的在网上找解决办法，下面我大概提一下我在网站遇到的几种办法，行不行的通呢？本人就亲测了下。如果有什么不对的地方或者有好的解决办法，也请告知。 1.弹出层出现时给body添加一个css样式：height:100%;overflow:hidden;弹出层消失再去掉这个类。测试结果：chrome手

关于父子级页面同时应用mCustomScrollbar，子页面无法出现滚动条问题: 需先在子页面打开前注销父页面的 mCustomScrollbar，然后再加载。 ///即将 $("demo").mCustomScrollbar("destroy");加在子页面打开前////

移动端iscroll局部滑动效果的实现及遇到的问题: 移动端局部滑动效果的实现采用的是iscroll插件 ,大家可以看看https://github.com/Slovty/iscroll ,里面有demo ,下载下来自己研究研究就差不多了,接下来讲讲我遇到的问题,记自己. 1.层错位的问题 demo里面设置的是绝对定位( position :absolute),这个问题导致滑动的层充满了整个屏幕,去掉这个css属性就ok了.

刷新iframe后,浏览器滚动条的位置置顶: function s(){document.getElementByIdx_x("TextBox2").focus();//document.getElementByIdx_x("TextBox2").style.display="none";}然后在顶部加个text框,&lt;input type="text" id="TextBox21" name="TextBox2" s

解决多个tab之间来回切换，iscroll.js 上拉加载更多出现重复请求加载问题: 解决多个tab之间来回切换，iscroll.js 上拉加载更多出现重复请求加载问题。解决办法：设置一个标识，每个tab下面的iscroll对象只能初始化一次，这样就解决了。效果图这样的：关键代码，如下： $('.top >span').on('click',function(){ if($(this).hasClass('all')){ page.pa...

iScroll.js参数说明和使用方法: iScroll调用时参数设置：所属属性名说明默认值核心库croe options.useTransform 是否使用 CSS3 的 Transform 属性 true options.useTransition

iScroll 左右滑动获取索引: 写上 snap 属性为truevehicleInterval = setInterval('setVehicleInfo()',500); myScroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false, snap:true, onScrollEnd : function() {

拖动滚动条判断fixed定位切换时，火狐和IE下会有抖动，默认给定位的DIV一个absolute即可。: 最近的一个项目，需要做当滚动条拉g

移动端IScroll插件滚动效果: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

关于动态加载，滚动条导致抖动解决方案: image 应为刚开始高度没有滚动条，后来请求数据回来高度增加导致滚动条显示，加上下面一行，不管高度够不够，都显示滚动条。 body { /* 解决侧边滑动引起界面抖动 */ overflow-y:scroll; } image ...

iscroll 内的点击事件失效: 今天在做微信网页的时候。点击列表在手机上无法触发 click事件，试了n多写法。还是无法解决，本地测试正常，到手机上就无法执行。最终测试：是在列表的外层使用了代码A： listsContainer = new IScroll('#lists-container', { scrollbars: true, mouseWh...

手机浏览器中使用IScroll使click及a跳转事件无效: 最近在页面中用iscroll.js，但是但是有跳转，用a标签的href进行跳转发现没有用，之后转换成用点击事件，发现依然不起作用，经过查询发现是禁止了浏览器的默认事件。有的方法说如果用button或input代替a，都能响应click事件。如果设置click为true，原来不能点击的手机能点击了，但是原来能点击的手机变成了双击，也就是将手机本身的click和iscroll的click各执

解决由于页面高度变化滚动条是否显示导致的抖动: html,body{ overflow-y:scroll;} html,body{ overflow:scroll; min-height:101%;} html{ overflow:-moz-scrollbars-vertical;}

使用keepAlive对上下拉刷新列表数据和滚动位置细节处理 - vue: 【前言】　　使用vue处理项目中遇到列表页面时，之前项目中总会有一些细节问题处理得不太好，这里总结一下，以便优化以后的代码。如下:　　1. 使用mint-ui中的LoadMore组件上下拉刷新时，有时无法触发上拉加载更多的方法。还有ios上滚动不太流畅。　　2. 从列表进入详情，再返回时，列表页需要记住之前的滚动位置，记住它上次的数据，但从其他页面进入列表页时，需要它重新刷新。【需要实现效果】　...

我遇到的iscroll.js 无法滑动的问题: 最近在H5开发，用到了iscroll 的上拉加载和下拉刷新，遇到了无法滑动的现象，下面是初始化代码， myScroll = new IScroll('#content', { probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll...

iscroll5 refresh 及iscroll4刷新功能: iScroll-5拉动刷新（pull-to-refresh）根据iscroll4代码改写结构一样。

ext grid刷新后 滚动条位置不变: Ext.override(Ext.grid.GridView, { scrollTop : function() { this.scroller.dom.scrollTop = 0; this.scroller.dom.scrollLeft = 0; }, scrollToTop : Ext.empty...

elementUI二级表格操作再次点击滚动条留在上次滑动位置问题: 只需在再次点击时加上this.tableData=‘’就可以解决

iScroll.js实现缩放、下拉刷新、滑动切换等移动应用场景: http://cubiq.org/iscroll-5

ScrollTo：平滑滚动到页面指定位置: 使用方法 1、准备jQuery库和scrollTo.js插件。 type="text/javascript" src="js/jquery.js"> type="text/javascript" src="js/jquery.scrollTo.js"> 2、HTML class="nav"> >href="#" class="nav_pro">产品展示 >href="

webapp之下拉刷新上拉滚动 JS - iScroll5: 1. 手册 http://iscrolljs.com/ 2. demo：http://www.gatekeepers.se/test/iScroll5/iscroll5-pull-test.html http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html

移动端ios屏幕滚动时filter发生抖动闪烁bug: 做项目时候有些内容（一段文字）需要高斯模糊效果，就用了如下html和css： //html 知识维度的精熟程度是<span class="filter" style="color: rgb(60, 118, ...

一行代码搞定iframe滚动条定位: 滚动条始终在最下端: window.onload=function (){ document.documentElement.scrollTop=parseInt(document.body.offsetHeight)-parseInt(document.documentElement.offsetHeight)+100; } /*上面的加100是因为取offsetHeight的值不是很准...

2008年国民经济和社会发展统计公报下载: 2008年国民经济2008年国民经济和社会发展统计公报和社会发展统计公报2008年国民经济和社2008年国民经济和社会发展统计公报会发展统计公报相关下载链接：[url=//download.csdn.net/download/sq040211/2351257?utm_source=bbsseo]//download.csdn.net/download/sq040211/2351257?utm_source=bbsseo[/url]

多线程进度条（事件触发）下载: 通过事件触发实现进度条的滚动，使用多线程防止界面假死相关下载链接：[url=//download.csdn.net/download/kolexliu/2401224?utm_source=bbsseo]//download.csdn.net/download/kolexliu/2401224?utm_source=bbsseo[/url]

00000026_beansize的用法.rar下载: 00000026_beansize的用法.rar00000026_beansize的用法.rar 相关下载链接：[url=//download.csdn.net/download/gxlstone/2481501?utm_source=bbsseo]//download.csdn.net/download/gxlstone/2481501?utm_source=bbsseo[/url]

文章热词机器学习教程 Objective-C培训交互设计视频教程颜色模型设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java 在线学习高手云计算高手班教程

我们是很有底线的