js限定内容的溢出滚动(offset,style.left)

1.html:
<div class="test" style="position: relative;">
<ul id="content" style="position: relative;">
<li>test111111111112222</li>
</ul>
</div>

2.scss:
.test{
overflow: hidden;
width: 200px;
}
ul#content{
list-style-type: none;
font-size: 0px;
white-space: nowrap;
overflow:hidden;
padding:0px;
li{
display: inline-block;
vertical-align: top;
font-size: 13px;
}
}

3.js:
<script>
$(function() {
var width = window.innerWidth - 100;
var content = $('#content').html();     //原内容<li>test111111112222222222</li>
var content_width = $('#content li').width(); //原宽度

$('#content').html(content + content);
var w = $('#content li').length * $('#content li').eq(0).width(); //w 总长度
$('#content').css('width', w);
var timer;
var el = $('#content')[0];

function toRight() {
window.clearInterval(timer);
var timer = window.setInterval(function () {
var offset = el.offsetLeft+10;  //偏移值 每次相对当前位置偏移10px
if(offset > 0){                 //第一次进来执行一次,以后为-xx 不再执行
//每次 +10 递增 -160,-150,-140,...,0,10 一旦>0,重置为-165
offset = -el.offsetWidth/2;
}
el.style.left = offset+'px';
},100)
}

function toLeft() {
window.clearInterval(timer);
var timer = window.setInterval(function () {
var offset = el.offsetLeft - 10;
if(offset<= -el.offsetWidth/2){  // 同理 当向左偏移到一半的时候重置回来
offset = 10;
}
el.style.left = offset+'px';
},100)
}

//如果容器的宽度够显示内容不进行滚动,不够则进行滚动显示
if($('.test').width() > content_width){
$('#content').html(content);
}
else{
toLeft();
}
});
</script>

// js部分:
$(function() {
var width = window.innerWidth - 100;
var content_width = $('#content li').width();
$('.test').width(width);
if(width < content_width){               //如果内容长度大于显示长度
var timer;
var el = $('#content')[0];
var offset = 0;             //内容的初始位置
var content = $('#content').html();
$('#content').append(content);   // 将原内容复制为两条,目的:当向左偏移时,内容前部分消失,在内容的尾部后可以看到内容消失的头部
function toLeft(){
window.clearInterval(timer);
timer = window.setInterval(function () {
offset = el.offsetLeft - 15;  //每次偏移的量
if(offset < -content_width-30){                      //如果滚动到底了,重置回来
offset = 0;
}
el.style.left = offset+'px'; //执行偏移
},100); // 每100毫秒移动一遍
}
toLeft();
console.log(content_width);
}
});

//css:
ul#content{
list-style-type: none;
font-size: 0px;
white-space: nowrap;
padding:0px;
li{
display: inline-block;
vertical-align: top;
font-size: 13px;
padding-left: 20px;
}
}