手动控制div内信息上下滚动

最新推荐文章于 2023-10-28 16:45:29 发布

seedling_lq

最新推荐文章于 2023-10-28 16:45:29 发布

阅读量951

点赞数

CC 4.0 BY-SA版权

文章标签： div function scroll microsoft button asp.net

本文链接：https://blog.youkuaiyun.com/seedling_lq/article/details/1881450

本文介绍了一种使用HTML和JavaScript实现元素自动滚动的方法。通过创建一个可滚动的div区域，并结合按钮控制上下滚动，适用于展示动态信息或公告栏场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重新封装了一下原先的div信息自动滚动的代码/特记录如下

<html>
<head>
    <title>ScrollDemo</title>
</head>
<body>
    <input id="down" type="button" onmousedown="scroll.downScroll()" onmouseup="scroll.stopScroll();"
        value="down" />
    <input id="up" type="button" onmousedown="scroll.upScroll();" onmouseup="scroll.stopScroll();"
        value="up" />
    <div id="scrollDiv" style="width: 280px; height: 110px; line-height: 20px; overflow: hidden;
        background-color: #eeeeee; font-size: 12px">
        1比比谁的“粉丝”（关注者）多？<br>
        2看看谁是优快云最“可爱”的人<br>
        3优快云论坛推出“问专家”功能<br>
        4可以让您的问题更快速、高效的得到解决<br>
        5Microsoft酷炫应用争霸赛——万元现金等你拿<br>
        6最后一季举报处理建议专用贴(ASP.NET)<br>
        7VS.NET开发中的小技巧<br>
        8VS.NET 2005中实用的默认键<br>
        9部署问题请大家帮忙，分不多了，请大家原谅！<br>
        10求优快云首页的轮流广告代码<br>
        11 SLQ语句，时间判断
    </div>

    <script type="text/javascript">
      var $ = function(id){
        return document.getElementById(id);
      }

      function Scroll(){
      }

      Scroll.prototype={
          init:function(scrollobj){
               this.scrollBox = scrollobj;
               this.scrollBoxHeight = this.scrollBox.clientHeight;
               this.scrollBoxInner = this.scrollBox.innerHTML;
               this.scrollCol = this.scrolln = 0;
               this.scrollBox.innerHTML += "<br>" + this.scrollBoxInner;
               this.scrollCol =this.scrollBox.scrollTop;
               this.scrolln = 0;
               $('up').disabled="disabled";
          },
          downScroll:function(){
              $('up').disabled="";
              this.scrollBox.scrollTop = this.scrollCol + this.scrolln;
              if(this.scrolln==this.scrollBoxHeight)
               {$('down').disabled="disabled";return;}
              else
               this.scrolln ++;
               var o = this;
              function m(){o.downScroll();}
              this.timer = setTimeout(m,20);
          },
          upScroll:function(){
              $('down').disabled="";
              this.scrollBox.scrollTop = this.scrollCol + this.scrolln;
              if(this.scrolln==0)
               {$('up').disabled="disabled";return;}
              else
               this.scrolln --;
               var o = this;
              function m(){o.upScroll();}
              this.timer = setTimeout(m,20);
          },
          stopScroll:function(){
              clearTimeout(this.timer);
          }
      }
      var scroll = new Scroll();
      scroll.init($('scrollDiv'));
    </script>
</body>
</html>