1. Why does the refresh page offsetWidth value change all the time? If possible, please run this code to know, if refreshed, it will automatically change to 200 or 0. 0. In addition, I added the auto-positioning function of clicking on the slider when the drag-and-drop function is good, but there is a conflict between the two events. How to solve this problem?
2. Page code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ffg</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 150px;
margin: 50px auto;
background-color: rgb(206, 206, 206);
position: relative;
}
.leftBtn {
float: left;
padding-top: 20px;
}
.leftBtn a {
display: block;
width: 20px;
height: 65px;
background: url(images/bg05.png) no-repeat 0 0;
}
.rightBtn {
float: left;
padding-top: 20px;
}
.rightBtn a {
display: block;
width: 20px;
height: 65px;
background: url(images/bg05.png) no-repeat -40px 0;
}
.imgList {
float: left;
height: 150px;
width: 760px;
overflow: hidden;
position: relative;
}
.m_unit {
width: 1000%;
height: 130px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul {
list-style: none;
}
.m_unit ul li {
float: left;
margin-right: 10px;
}
.scrollWay {
width: 100%;
height: 20px;
background-color: rgb(66, 66, 66);
position: absolute;
bottom: 0;
}
.scrollBlock {
position: absolute;
left: 0;
top: 2px;
width: 300px;
height: 15px;
/* background-color: red; */
background: url(images/bg07.png) 0 31px;
}
.sBleft {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 15px;
background: url(images/bg07.png) 0 0;
}
.sBright {
position: absolute;
top: 0;
right: 0;
width: 11px;
height: 15px;
background: url(images/bg07.png) -24px 0;
}
.sBcenter {
position: absolute;
top: 0;
left: 50%;
margin-left: -7px;
width: 14px;
height: 15px;
background: url(images/bg07.png) -46px 0;
}
</style>
</head>
<body>
<div class="box">
<div class="leftBtn" id="leftBtn">
<a href="javascript：;"></a>
</div>
<div class="imgList" id="imgList">
<div class="m_unit" id="m_unit">
<ul>
<li>
<img src="images/0.png" alt="">
</li>
<li>
<img src="images/1.png" alt="">
</li>
<li>
<img src="images/2.png" alt="">
</li>
<li>
<img src="images/3.png" alt="">
</li>
<li>
<img src="images/4.png" alt="">
</li>
<li>
<img src="images/5.png" alt="">
</li>
<li>
<img src="images/6.png" alt="">
</li>
<li>
<img src="images/7.png" alt="">
</li>
<li>
<img src="images/8.png" alt="">
</li>
<li>
<img src="images/9.png" alt="">
</li>
<li>
<img src="images/0.png" alt="">
</li>
</ul>
</div>
<div class="scrollWay" id="scrollWay">
<div class="scrollBlock" id="scrollBlock">
<div class="sBleft"></div>
<div class="sBright"></div>
<div class="sBcenter"></div>
</div>
</div>
</div>
<div class="rightBtn" id="rightBtn">
<a href="javascript：;"></a>
</div>
</div>
<script type="text/javascript">
//
var scrollBlock = document.getElementById("scrollBlock");
var scrollWay = document.getElementById("scrollWay");
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var imgList = document.getElementById("imgList");
var m_unit = document.getElementById("m_unit");
var lis = document.getElementById("m_unit").getElementsByTagName("li");
//
var rate = imgList.offsetWidth / (210 * lis.length);
console.log("LIOFFSET" + lis[0].offsetWidth);
scrollBlock.style.width = scrollWay.offsetWidth * rate + "px";
//
scrollBlock.onmousedown = function (event) {
event = event || window.event;
//
var Dvalue = event.clientX - scrollBlock.offsetLeft;
//
document.onmousemove = function (event) {
event = event || window.event;
var x = event.clientX - Dvalue;
//
if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
} else if (x < 0) {
x = 0;
}
scrollBlock.style.left = x + "px";
//
m_unit.style.left = -x / rate + "px";
//
document.onmouseup = function () {
document.onmousemove = null;
}
//
event.preventDefault();
return false;
}
}
//
leftBtn.onclick = function () {
var x = scrollBlock.offsetLeft - 50;
//
if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
} else if (x < 0) {
x = 0;
}
scrollBlock.style.left = x + "px";
m_unit.style.left = -x / rate + "px";
}
rightBtn.onclick = function () {
var x = scrollBlock.offsetLeft + 50;
//
if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
} else if (x < 0) {
x = 0;
}
scrollBlock.style.left = x + "px";
m_unit.style.left = -x / rate + "px";
}
//
scrollWay.onclick = function (event) {
event = event || window.event;
//
var msx = event.offsetX;
if (msx > scrollBlock.offsetLeft) {
msx = event.offsetX - scrollBlock.offsetWidth;
} else if (msx < scrollBlock.offsetLeft) {
msx = event.offsetX;
};
scrollBlock.style.left = msx + "px";
m_unit.style.left = -msx / rate + "px";
return false;
}
</script>
</body>
</html> 3. Picture 
4. If possible, please ask the god to run it to help see why two events are incompatible and there is no solution. Thank you very much!