<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>57-JavaScript-scroll属性</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
padding: 50px;
border: 50px solid #000;
background: red;
background-clip: content-box;
color: deepskyblue;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
</div>
<script>
/*
1.内容没有超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
*/
let oDiv = document.querySelector("div");
console.log(oDiv.scrollWidth);//content的宽度加上文字的宽度
console.log(oDiv.scrollHeight);//content的高度加上文字的高度
/*
2.内容超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
*/
/*
3.scrollTop / scrollLeft
scrollTop: 超出元素内边距顶部的距离
scrollLeft: 超出元素内边距左边的距离
*/
// console.log(oDiv.scrollTop);
oDiv.onscroll = function () {//超出的部分的高度.
console.log(oDiv.scrollTop);
}
</script>
</body>
</html>
scroll
原创
©著作权归作者所有:来自51CTO博客作者陈业贵的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:client offset详解
下一篇:事件中对象如何兼容各种浏览器
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue-seamless-scroll 有部分点击没反应问题
vue-seamless-scroll 插件在使用过程中,子元素设置点击事件,部分没有反应问题
事件委托 vue-seamless-scroll 前端 -
scroll属性
scroll属性
javascript html 二维 jquery css -
scroll calendar & scroll view
scroll calendar & scroll view
scroll view taro html -
scroll tabs
scroll tabs
scroll tabs taro github 3d css