首页 > 其他 > 详细

3.10 针对于iscroll 使用y获取滚动高度

时间:2016-03-10 12:17:16      阅读:202      评论:0      收藏:0      [点我收藏+]

今天在做实际手机端操作的时候,发现了这个

<ul class="wind-alert-ul" style="transform-origin: 0px 0px 0px; position: absolute; top: -200px; left: 0px;">
                        <li>&nbsp;</li>
                        <li>关闭</li>
                        <li>低速</li>
                        <li>中速</li>
                        <li>高速</li>
                        <li>关闭</li>
                        <li>低速</li>
                        <li>中速</li>
                        <li>高速</li>
                        <li>关闭</li>
                        <li>低速</li>
                        <li>中速</li>
                        <li>高速</li>
                        <li>关闭</li>
                        <li>&nbsp;</li>
                    </ul>

发现在滚动的时候,top的值是变化的,那么是不是可以通过这个top值来获取滚动的高度,结果又了如下的写法

onScrollEnd:function(){
                var top=$(".wind-alert-ul").css("top");
                alert(top);
                var number=parseInt(top.split(‘px‘)[0].substring(1));
                alert(number);
                $(".ok").click(function(){
                    var text=$(".wind-alert-ul li:eq("+number+")").get(0);
                    $(".wind-set-b").text(text.innerHTML);
                    
                    
                })
            }

测试发现在电脑是可以的,但是实际上再手机端由于浏览器的差别会有锁不同,在uc上浏览器测试发现弹出的top值一直都是auto,如果是这样的话,那么number也就无法进行计算

发现了这个问题之后,请教了同事,其实在iscroll.js中可以使用y来获取滚动垂直初始位置,将位置转化为正数,然后可以通过除以Li的高度去找到现在处于的li的位置,由于在布局的时候,多加了一个&nbsp所以需要在位置上加上1,将其中的内容进行替换就可以了

修改后的代码如下:

    onScrollEnd:function(){
                console.log(this.y);
                var number=(Math.abs(this.y))/50+1;
                $(".ok").click(function(){
                    var text=$(".wind-alert-ul li:eq("+number+")").get(0);
                    $(".wind-set-b").text(text.innerHTML);
                    
                    
                })
            }

经测试,手机端显示正常,可以弹出正常的滚动高度

3.10 针对于iscroll 使用y获取滚动高度

原文:http://www.cnblogs.com/miaomiao8899/p/5261152.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!