最近发现一个问题 移动端上需要滚动中奖结果，所有需要接口获取数据，动态拼接dom元素，再向左滚动，当滚动到最后的时候，需要重置left为0，循环滚动；
页面布局如下
#box{
width: 300px;
position: relative;
overflow: hidden;
height: 30px;
}
ul{
position: absolute;
top: 0;
left: 0;
margin: 0;
/*width: 35000px;*/
}
ul span{
margin: 0 10px;
}
</style>
</head>
<body>
<div id="box">
<ul></ul>
</div>
ul定位后定时器left往左移动， 出现问题的原因目前发现是 ul没有设置宽度或者设置的宽度比最后动态计算的宽度小，就会获取宽度会发生问题；
一下是模拟请求
<script type="text/javascript">
setTimeout(function(){
var list = [{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},
{rewardtype:8, mobile:123, rewardvalue:'呵呵哒'},]
renderUl(list)
},3000)
function renderUl(list){
var str = '';
list.forEach(function (user) {
str += '<span>' + user.mobile + '获得' + user.rewardvalue + '</span>'
})
$('ul').html(str);
getWidth()
}
function getWidth(){
var width=0;
$('ul').find('span').each(function(i, v){
console.log('i',$(v).outerWidth(true))
width+=$(this).outerWidth(true);
})
$('ul').width(width);
console.log('第一次',width) // 第一次 2930
var width=0;
$('ul').find('span').each(function(i, v){
console.log('i',$(v).outerWidth(true))
width+=$(this).outerWidth(true);
})
$('ul').width(width);
console.log('第二次',width) // 第二次 1922
}
</script>
11111.jpg
第一次获取的宽度不是实际的宽度，把里面的数据打印出来可以看到里面某个span便签的宽度会猛然增加;目前没发现是为什么，不过通过ul在css中默认设置一个非常大的宽度之后，数据会正常；
刚刚同事提醒，可以设置ul的宽度足够宽，反正比拼接后的宽度宽就行，ul里面放一个div，样式绝对定位，设置left为0；这样div就自动变为行内元素了，接口获取数据后拼接的span标签放到div里面，div宽度自动撑开，这个时候定时器移动div即可，当left为div宽度的时候，重置left为0；
menu.saveimg.savepath20180607092711.jpg
设置横向滚动css
核心三要素：
父元素设置 width: 100%，横向滚动 overflow-x: scroll
父元素不换行 white-space: nowrap
子元素设置为行内块级元素 display: inline-block
