昨天公司搬新家了，现在的新公司这个办公环境是真真好，周边环境也很不错，很舒心。我这个标题起得自己也不是很满意，但是真的不知道这个组件该起什么名字，但是显示的图片是这样的：
，就是轮播这些常见问题的一个div吧，以后在自己网站上也是可以这样做，用来帮助找到常规问题的解决入口的，于是简单的模拟了一下：
<div class="demo">
<p>举行中俄海上联合军事演习，是贯彻落实两国领导人共识、巩固深化中俄全面战略协作伙伴关系的重要举措。去年在中国海军组织下，中俄海军在黄海海域成功举行了海上联合军事演习，
迈出了中俄海上务实性军事交流合作的第一步。今年，由俄方牵头组织联演，既是去年中俄海上联合演习的延续深化，也标志着中俄海上联合军事演习制度化、常态化机制的形成，对于进
一步增进中俄两国两军战略互信和传统友谊，提高联合应对海上安全威胁的能力水平，彰显共同维护世界和平和地区稳定的坚定决心，具有重大战略意义。举行中俄海上联合军事演习，是
贯彻落实两国领导人共识、巩固深化中俄全面战略协作伙伴关系的重要举措。去年在中国海军组织下，中俄海军在黄海海域成功举行了海上联合军事演习，迈出了中俄海上务实性军事交流
合作的第一步。今年，由俄方牵头组织联演，既是去年中俄海上联合演习的延续深化，也标志着中俄海上联合军事演习制度化、常态化机制的形成，对于进一步增进中俄两国两军战略互信
和传统友谊，提高联合应对海上安全威胁的能力水平，彰显共同维护世界和平和地区稳定的坚定决心，具有重大战略意义。</p>
</div>
*{
padding:0px;
margin:0px;
}
.demo{
200px;
height:200px;
border:5px solid #f27b04;
overflow:hidden;
padding-left:5px;
padding-right:5px;
position:relative;
}
.demo p{
/* position:absolute; */
}
<script type="text/javascript">
function scroll_v_1(){
var p = document.querySelectorAll(".demo p")[0];
var mt = 0;
setInterval(function(){
mt -= 10;
p.style.marginTop = mt+"px";
if(-mt>p.clientHeight){
mt = 200;
}
},500);
}
scroll_v_1();
function scroll_v_2(){
var p = document.querySelectorAll(".demo p")[0];
var mt = 0;
setInterval(function(){
mt -= 10;
p.style.top = mt+"px";
if(-mt>p.clientHeight){
mt = 200;
}
},500);
}
//scroll_v_2();
</script>
前一个版本用margin-top做，后一个版本用position:absolute和top做，都差不多，而且共同点在于都需要用这个clientHeight来知道何时这个p元素能滚动尽头，那么让p元素重头来一下，而且是在div的下边框开始往上滚，无需解释的一堆代码，不解释了。