js 嵌套滚动条对dom的left，right，top，bottom的影响

Demo示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue3-scroll-demo</title>
</head>

<body style="height: 2500px;width: 2500px;">
	
	
	<div id="app" style="margin-top: 500px;margin-left: 300px;">
	
	
		
		<div style="width: 800px;height: 800px;background-color: #38E0BE;overflow: scroll;">
		
			<div style="width: 1800px;height: 1800px;">
			
				<div ref="ele" style="margin-left: 300px;margin-top: 500px;width:200px;height: 200px;background-color: antiquewhite;">
			
				
				</div>
				
			</div>
			
		</div>
		
		
		<div style="width: 500px;height: 500px;background-color: blue;">
			<div style="width: 100px;height: 100px;background-color: chocolate;position: relative;top: 0;left: 0;">
			</div>
		</div>
	
	
	</div>

	<script type="module">
	  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

	  createApp({
		data() {
		  return {
			message: 'Hello Vue!'
		  }
		},
		  created(){
			  window.addEventListener('scroll',()=>{
				  let ele = this.$refs.ele
				  console.log("ele",ele,ele.getBoundingClientRect())
			  })
		  }
	  }).mount('#app')
	</script>
	
	
</body>
</html>

对getBoundingClientRect计算dom位置属性的影响汇总

  • left,right,top,bottom 都是相对浏览器的视口进行计算的，无论你的元素是否在一个嵌套的滚动的容器中。
  • 浏览器视口左上角的坐标是 0，0
  • right=left+width；同理，bottom=top+height。
  • 子元素的scrollHeight/scrollWidth超出上一级容器，不代表父容器是可滚动的，取决于 overflow: scroll/auto/... 属性的值。
  • 子元素如果使用绝对定位，也不代表父容器是可滚动的，因为使用绝对定位的子元素已脱离正常的文档流。

其他

MDN getBoundingClientRect方法说明
MDN 对可滚动和是否滚动到底部的简易版计算方式，在底下的示例

posted @ 2022-10-12 15:25  星小梦  阅读(127)  评论(0)  编辑  收藏  举报