模拟淘宝滚动显示问题解决入口

昨天公司搬新家了，现在的新公司这个办公环境是真真好，周边环境也很不错，很舒心。我这个标题起得自己也不是很满意，但是真的不知道这个组件该起什么名字，但是显示的图片是这样的：，就是轮播这些常见问题的一个div吧，以后在自己网站上也是可以这样做，用来帮助找到常规问题的解决入口的，于是简单的模拟了一下：

<div class="demo">
    <p>举行中俄海上联合军事演习，是贯彻落实两国领导人共识、巩固深化中俄全面战略协作伙伴关系的重要举措。去年在中国海军组织下，中俄海军在黄海海域成功举行了海上联合军事演习，
      迈出了中俄海上务实性军事交流合作的第一步。今年，由俄方牵头组织联演，既是去年中俄海上联合演习的延续深化，也标志着中俄海上联合军事演习制度化、常态化机制的形成，对于进
      一步增进中俄两国两军战略互信和传统友谊，提高联合应对海上安全威胁的能力水平，彰显共同维护世界和平和地区稳定的坚定决心，具有重大战略意义。举行中俄海上联合军事演习，是
      贯彻落实两国领导人共识、巩固深化中俄全面战略协作伙伴关系的重要举措。去年在中国海军组织下，中俄海军在黄海海域成功举行了海上联合军事演习，迈出了中俄海上务实性军事交流
      合作的第一步。今年，由俄方牵头组织联演，既是去年中俄海上联合演习的延续深化，也标志着中俄海上联合军事演习制度化、常态化机制的形成，对于进一步增进中俄两国两军战略互信
      和传统友谊，提高联合应对海上安全威胁的能力水平，彰显共同维护世界和平和地区稳定的坚定决心，具有重大战略意义。</p>
  </div>

 

       *{
	  padding:0px;
	  margin:0px;
	}
       .demo{
	   width: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的下边框开始往上滚，无需解释的一堆代码，不解释了。