javascript实现不间断的向上（下、左、右）滚动

最新推荐文章于 2021-06-03 13:39:16 发布

koga007

最新推荐文章于 2021-06-03 13:39:16 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_35504206/article/details/80559035

版权

元素布局：

<div class="box" id="scroll_left">
     <div class="scroll_ele" id="scroll_ele">
         <div class="item">9999999</div>
         <div class="item">9999999</div>
         <div class="item">9999999</div>
         <div class="item">9999999</div>
     </div>
     <div class="scroll_copy" id="scroll_copy">

     </div>

</div>

不间断的向左滚动：

 function scoll(){
            if($scroll_copy.offsetWidth-$scroll_left.scrollLeft<=0){
                $scroll_left.scrollLeft-=$scroll_ele.offsetWidth
            }else{
                $scroll_left.scrollLeft++;
            }
        }
setInterval(scoll,speed);

不间断向右滚动：

function scoll_right(){
            if($scroll_right.scrollLeft<=0){
                $scroll_right.scrollLeft+=$scroll_right_copy.offsetWidth
            }else{
                $scroll_right.scrollLeft--;
            }
        }
setInterval(scoll_right,speed);

不间断向上滚动：

 $scroll_top_copy.innerHTML = $scroll_top_ele.innerHTML;
 function scroll_top(){
      if($scroll_top_copy.offsetHeight-$scroll_top.scrollTop<=0){
           $scroll_top.scrollTop-=$scroll_top_ele.offsetHeight
      }else{
            $scroll_top.scrollTop++
      }
  }
setInterval(scroll_top,speed);

不间断向下滚动：

$scroll_bottom_copy.innerHTML = $scroll_bottom_ele.innerHTML;
function scroll_bottom(){
      if($scroll_bottom.scrollTop<=0){
         $scroll_bottom.scrollTop+=$scroll_bottom_ele.offsetHeight
      }else{
         $scroll_bottom.scrollTop--
     }
}
setInterval(scroll_bottom,speed);