怎样获取滚动条的位置啊，document.body.scrollTop 和 document.documentElement.scrollTop 一直是0

分类：HBuilder

scroll

用的是官方提供的上拉加载模板，想获取其滚动高度，document.body.scrollTop 和 document.documentElement.scrollTop 一直是0。

2016-05-12 13:41 负责人:无分享

3 个回复

roller

html
<div class="mui-content">

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" >
<div id="scrollDiv" class="mui-scroll">

js

// var scrollDiv = document.getElementById('scrollDiv');
// scrollDiv.addEventListener('scroll',function(){
// //安卓中获取出来为空就会报错
// var translate3d = this.style.webkitTransform;//translate3d(0px, -147px, 0px) translateZ(0px)
// var scrollData = translate3d.substring(12,translate3d.length-17);//0px, -147px, 0px
// var scrollTop = scrollData.split(", ")[1].substring(0,scrollData.split(", ")[1].length-2)//-147
// });

以上为我的代码

紫竹林 (作者)

非常感谢，问题已解决。

roller

不知道你在安卓中是怎么获取的滚动条高度

2016-05-13 12:24
紫竹林 (作者)

就是用你发的代码，可以获取到滚动高度

2016-05-13 12:47
roller

@bh769013995@163.com:你能把你写的代码给我看看嘛，我在安卓中始终不行。

2016-05-13 14:32

紫竹林 (作者)

<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</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">  

    <link rel="stylesheet" href="../css/mui.min.css">  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  
        .mui-bar~.mui-content .mui-fullscreen {  
            top: 44px;  
            height: auto;  
            bottom: 40px;  
        }  
        .mui-pull-top-tips {  
            position: absolute;  
            top: -20px;  
            left: 50%;  
            margin-left: -25px;  
            width: 40px;  
            height: 40px;  
            border-radius: 100%;  
            z-index: 1;  
        }  
        .mui-bar~.mui-pull-top-tips {  
            top: 24px;  
        }  
        .mui-pull-top-wrapper {  
            width: 42px;  
            height: 42px;  
            display: block;  
            text-align: center;  
            background-color: #efeff4;  
            border: 1px solid #ddd;  
            border-radius: 25px;  
            background-clip: padding-box;  
            box-shadow: 0 4px 10px #bbb;  
            overflow: hidden;  
        }  
        .mui-pull-top-tips.mui-transitioning {  
            -webkit-transition-duration: 200ms;  
            transition-duration: 200ms;  
        }  
        .mui-pull-top-tips .mui-pull-loading {  
            /*-webkit-backface-visibility: hidden;  
            -webkit-transition-duration: 400ms;  
            transition-duration: 400ms;*/  

            margin: 0;  
        }  
        .mui-pull-top-wrapper .mui-icon,  
        .mui-pull-top-wrapper .mui-spinner {  
            margin-top: 7px;  
        }  
        .mui-pull-top-wrapper .mui-icon.mui-reverse {  
            /*-webkit-transform: rotate(180deg) translateZ(0);*/  
        }  
        .mui-pull-bottom-tips {  
            text-align: center;  
            background-color: #efeff4;  
            font-size: 15px;  
            line-height: 40px;  
            color: #777;  
        }  
        .mui-pull-top-canvas {  
            overflow: hidden;  
            background-color: #fafafa;  
            border-radius: 40px;  
            box-shadow: 0 4px 10px #bbb;  
            width: 40px;  
            height: 40px;  
            margin: 0 auto;  
        }  
        .mui-pull-top-canvas canvas {  
            width: 40px;  
        }  
        .mui-slider-indicator.mui-segmented-control {  
            background-color: #efeff4;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav" >  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">选项卡切换+下拉刷新</h1>  
    </header>  
    <div class="mui-content">  
        <div id="slider" class="mui-slider mui-fullscreen">  
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                <div  class="mui-scroll">  
                    <a class="mui-control-item mui-active" href="#item1mobile">  
                        推荐  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        热点  
                    </a>  
                </div>  
            </div>  
            <div class="mui-slider-group">  
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                    <div  class="mui-scroll-wrapper">  
                        <div class="mui-scroll" id="scrollDiv">  
                        <ul class="mui-table-view">  
                        </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view">  
                           </ul>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>         
    </div>  

    <script src="../js/mui.min.js"></script>  
    <script src="../js/mui.pullToRefresh.js"></script>  
    <script src="../js/mui.pullToRefresh.material.js"></script>  
<script src="../js/mui.lazyload.js"></script>  
<script src="../js/mui.lazyload.img.js"></script>  
    <script>  
        mui.init();  
        (function($) {  
            //阻尼系数  
            var deceleration = mui.os.ios?0.003:0.0009;  
            $('.mui-scroll-wrapper').scroll({  
                bounce: false,  
                indicators: true, //是否显示滚动条  
                deceleration:deceleration  
            });  
            $.ready(function() {  
                //循环初始化所有下拉刷新，上拉加载。  
                $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                    $(pullRefreshEl).pullToRefresh({  
                        down: {  
                            callback: function() {  
                                var self = this;  
                                setTimeout(function() {  
                                    var ul = self.element.querySelector('.mui-scroll');

// ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}, 1);
}
}
});
});
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
fragment.appendChild(li);
}
return fragment;
};
});
})(mui);

        var scrollDiv = document.getElementById('scrollDiv');  
        scrollDiv.addEventListener('scroll',function(){  

        var translate3d = this.style.webkitTransform;//translate3d(0px, -147px, 0px) translateZ(0px)  
        var scrollData = translate3d.substring(12,translate3d.length-17);//0px, -147px, 0px  

        var scrollTop = scrollData.split(", ")[1].substring(0,scrollData.split(", ")[1].length-2)//-147  
            mui.toast(Math.abs(scrollTop));  
        });  

    </script>  
</body>

</html>

roller

我写的下拉刷新不和你一样，难道是因为这个吗？才没有获取到吗？

2016-05-13 15:11
紫竹林 (作者)

有可能，我觉得可能是滚动的窗体没找对，你可以把 translate3d 打印出来看看里面有没有值，

2016-05-13 15:58
紫竹林 (作者)

我刚试了另一种刷新，确实没有输出，

2016-05-13 16:34

该问题目前已经被锁定, 无法添加新回复

怎样获取滚动条的位置啊，document.body.scrollTop 和 document.documentElement.scrollTop 一直是0

3 个回复

公告

相关问题

怎样获取滚动条的位置啊，document.body.scrollTop 和 document.documentElement.scrollTop 一直是0

与内容相关的链接

3 个回复

公告

相关问题