浏览器窗口了解

最新推荐文章于 2023-05-30 09:27:23 发布

然陈

最新推荐文章于 2023-05-30 09:27:23 发布

阅读量555

点赞数

本文链接：https://blog.csdn.net/cj521zhihui/article/details/109021760

版权

浏览器窗口和滚动条

// wrap.clientWidth显示区域的宽
// wrap.offsetWidth 边框+滚动条+显示区域宽
// wrap.scrollWidth 内容实际的宽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrap{ 
				height: 200px;
				width: 820px;
				background-color: #f0f0f0;
				white-space: nowrap;
				overflow: auto;
				scroll-behavior: smooth;
				}
			.wrap::-webkit-scrollbar{ display: none;}
			.inner{
				width: 220px;
				height: 100px;
				background-color: gray;
				display: inline-block;
			}
			.inner:nth-of-type(2n){
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">1</div>
			<div class="inner">2</div>
			<div class="inner">3</div>
			<div class="inner">4</div>
			<div class="inner">5</div>
			<div class="inner">6</div>
		</div>
		<script>
			// 获取到wrap
			var wrap = document.querySelector(".wrap");			
			// wrap 宽度 
			// wrap.clientWidth显示区域的宽
			// wrap.offsetWidth 边框+滚动条+显示区域宽
			// wrap.scrollWidth 内容实际的宽
			var w = wrap.offsetWidth;
		
			// wrap 滚动条的位置
			// var sl = wrap.scrollLeft;
			
			//  某个inner元素距wrap左侧的距离
			var inner = document.querySelector(".inner:nth-of-type(4)");
			
			// 目标：单击哪个元素，滚动到最左侧
			var inners = document.querySelectorAll(".inner");
			for(let i=0;i<inners.length;i++){
				inners[i].onclick = function(){
					wrap.scrollLeft=inners[i].offsetLeft-w/2+inners[i].offsetWidth/2;
				}
			}
		</script>
	</body>
</html>

然陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器窗口了解

浏览器窗口和滚动条// wrap.clientWidth显示区域的宽// wrap.offsetWidth 边框+滚动条+显示区域宽// wrap.scrollWidth 内容实际的宽<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrap{ height: 200px;
复制链接

扫一扫