Javascript在包含LI的页面上居中水平滚动

仅使用JavaScript（不使用jquery）——我希望在列表项的类为“active”时将其置于容器的中心

最终结果将是一个转盘，其中“活动”li将在页面上居中，单击另一个li将使其处于活动状态，然后它将自动居中（滚动）。我遇到的问题是，我似乎无法从一开始就把它放在中心位置。宽度为页面的100%，因此宽度是动态的

任何和所有的帮助都会很好

html:

javascript:

var r = document.getElementById('carousel').offsetWidth;
var l = document.getElementById('carousel').scrollWidth;
var m = r / 2;
document.getElementById('carousel').scrollLeft = 0;
document.getElementById('carousel').scrollLeft = m;

---

您必须从

m

html, body {margin:0;padding:0;height:100%;width:100%;}
ul{
  position:relative;
  width:100%;
  height:322px;
  margin:0 auto;
  padding:0;
  overflow-x:hidden;
  white-space: nowrap;
}
li{
  position:relative;
  display:inline-block;
  padding:0;
  margin-right:20px;
  list-style-type:none;
  width:200px;
  height:200px;
  top: 70px;
  background-color:#efefef;
  border:1px solid #d3d3d3;
  border-radius: 12px;
}
li:first-child {
  margin-left: 20px;
}
li.active {
  top: 20px;
  width:300px;
  height:300px;
}

var r = document.getElementById('carousel').offsetWidth;
var l = document.getElementById('carousel').scrollWidth;
var m = r / 2;
document.getElementById('carousel').scrollLeft = 0;
document.getElementById('carousel').scrollLeft = m;