div 滚动条拖动到底或者指定位置横向竖向

对于div的滚动条的拖动，对于横向拖动和竖向拖动，获取到具体参数就ok

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
	</head>
	<body>
		<div id="div" style="width: 500px;height: 200px;background-color: lightblue;overflow: auto;">
			1<br>11<br>1<br>11<br>1<br>111111<br>111<br>1111111111111111111111111111111111111111111111111111111111111111111
			11<br>1<br>111<br>11<br>11<br>111111<br>11111<br>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
			<br><br>1111<br>11<br>111<br>1111<br>
		</div>
		
	</body>
	<<script>
		$('#div').scroll(function(){
			//div宽度
			var divWidth = $(this).width();
			//滚动条所处位置
			var scrollLeft = $(this).get(0).scrollLeft;
			//内容宽度
			var contentWidth = $(this).get(0).scrollWidth;
			//如果div宽度+滚动条所处位置==内容宽度
			if(contentWidth <= divWidth + scrollLeft){
				//将滚动条调整位置为初始
				$(this).get(0).scrollLeft = 0;
			}
			if(contentWidth - scrollLeft - divWidth <= 100){
				console.log('距离底部'+(contentWidth - scrollLeft - divWidth)+'px')
			}
			if(scrollLeft/(contentWidth - divWidth) >= 0.9){
				console.log('距离底部'+(scrollLeft/(contentWidth - divWidth)*100)+'%')
			}
			
			var height = $(this).height();
			var contentHeight = $(this).get(0).scrollHeight;
			var scrollTop = $(this).get(0).scrollTop;
			if(contentHeight <= height + scrollTop){
				console.log("到底儿了")
			}
			
		})
	</script>
</html>

div 滚动条拖动到底或者指定位置 横向竖向

相关推荐

div 滚动条拖动到底或者指定位置横向竖向