DOM中的scroll属性

最新推荐文章于 2022-12-03 20:17:25 发布

每一天，每一步

最新推荐文章于 2022-12-03 20:17:25 发布

阅读量635

点赞数

分类专栏： javaScript HTML/CSS 文章标签： javascript css html5

本文链接：https://blog.csdn.net/u010234868/article/details/119981990

版权

javaScript 同时被 2 个专栏收录

135 篇文章 12 订阅

订阅专栏

HTML/CSS

39 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
		}
		#box {
			width: 100px;
			height: 100px;
			margin: 50px;
			background-color: red;
			border: 10px solid yellow;
			padding: 15px;
			overflow: auto;
			/*overflow: hidden;*/
		}
	</style>
</head>
<body>
	<div id="box">涉及一些优秀攻城狮的优秀博客、社区,实用的手册、工具</div>
	<script>
		var box = document.getElementById('box');
		// // scrollLeft scrollTop分别对应的是滚动出去的内容的大小 包括border 非滚动条运动的距离
		// console.log(box.scrollLeft); // 0
		// console.log(box.scrollTop); // 0
		// // 内容的大小，包含padding和未显示的内容，不包含滚动条
		// console.log(box.scrollWidth); // 113
		// console.log(box.scrollHeight); // 156
		// // 元素的大小+padding 不包含滚动条 可视区域
		// console.log(box.clientWidth); // 113
		// console.log(box.clientHeight); // 130

		// 拖动滚动条时触发
		box.onscroll = function () {
			console.log('box.scrollLeft: ' + box.scrollLeft); // 0
			console.log('box.scrollTop: ' + box.scrollTop); 
			console.log('box.scrollWidth: ' + box.scrollWidth); // 113
			console.log('box.scrollHeight: ' + box.scrollHeight); // 156
		}
		
	</script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中的scroll属性

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; background-color: red; .
复制链接

扫一扫

专栏目录