紫竹林
紫竹林
  • 发布:2016-05-12 13:41
  • 更新:2016-05-13 14:51
  • 阅读:6338

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

分类:HBuilder

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

2016-05-12 13:41 负责人:无 分享
已邀请:
roller

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

紫竹林

紫竹林 (作者)

<!--我在模板示例(/pullrefresh_with_tab.html)里面验证了一下,是可以获取到的,就是在底部加来你发的代码。我自己的项目里也能正常获取,-->
<!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

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