浏览器窗口和滚动条
// 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>