美文网首页
文字垂直滚动轮播

文字垂直滚动轮播

作者: 真是个非常帅气的昵称呢 | 来源:发表于2018-12-10 13:54 被阅读0次
        <div id="scrollBox">
          <ul class="bottom_score" id="roll1">
              <li><span>1快乐海贼</span><span>已邀请满三位</span><span>已经获奖</span></li>
              <li><span>2快乐海贼</span><span>已邀请满三位</span><span>已经获奖</span></li>
              <li><span>3快乐海贼</span><span>已邀请满三位</span><span>已经获奖</span></li>
              <li><span>4快乐海贼</span><span>已邀请满三位</span><span>已经获奖</span></li>
              <li><span>5快乐海贼</span><span>已邀请满三位</span><span>已经获奖</span></li>
              <li><span>6快乐海贼</span><span>已邀请满三位</span><span>已经获奖</span></li>
          </ul>
          <ul class="bottom_score" id="roll2"></ul>
      </div>

Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。

scrollHeight的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。

没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括 ::before::after这样的伪元素。

HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before:after等伪类元素的高度。

对于文档的body对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

        var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
        var scrollBox=document.getElementById("scrollBox");
        var roll1=document.getElementById("roll1");
        var roll2=document.getElementById("roll2");
        roll2.innerHTML=roll1.innerHTML;
        function scrollUp(){
            if (scrollBox.scrollTop>=roll1.offsetHeight){
                scrollBox.scrollTop=0;
            } else{
                scrollBox.scrollTop++
            }
        }
        var timer=null;
        timer=setInterval(scrollUp,50);

相关文章

网友评论

      本文标题:文字垂直滚动轮播

      本文链接:https://www.haomeiwen.com/subject/slvrhqtx.html