精华内容
下载资源
问答
  • div 自动上下滚动特效

    千次阅读 2019-09-11 14:14:24
    * stepLength:一次滚动步长 * speed:滚动速度 * delay:停留时间 * element:Element对象 * * element.offsetHeight 元素的像素高度(包括边框和填充) * element.scrollTop 元素的内容垂直滚动的像素 * ...

    话不多说,直接上代码!

    /**
     * stepLength:一次滚动步长
     * speed:滚动速度
     * delay:停留时间
     * element:Element对象
     * 
     * element.offsetHeight 元素的像素高度(包括边框和填充)
     * element.scrollTop 元素的内容垂直滚动的像素
     * element.scrollHeight 元素的高度(包括带滚动条的隐蔽的地方)
     */
    function autoScroll(stepLength, speed, delay, element) {
        let interval
        let step = 1
        element.scrollTop = 0
    
        function start() {
            interval = setInterval(scrolling, speed)
            element.scrollTop += step
        }
          
        function scrolling() {
            if (element.scrollTop % stepLength !== 0) {
              element.scrollTop += step
            } else {
              if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight)) { // 触顶或触底
                step *= -1 // 转换方向
              }
              clearInterval(interval)
              setTimeout(start, delay)
            }
        }
     
        if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时,不触发
            setTimeout(start, delay)
        }
    }
    // 调用
    const element = document.getElementById('xxx')
    autoScroll(55, 20, 1500, element)

    如图,效果是每次向下滚动一格,触底后,每次向上滚动一格,不断循环

     

    注:stepLength 设置成一格的高度,element.offsetHeight 设置成 n 格高度之和,可达到最佳效果

    展开全文
  • css实现div自动添加滚动条比较实用的功能,当图片或文字超出div所规定的宽或高时,会自动出现滚动条,这一点还是比较有利于用户体验的,本文整理了一些实现自动滚动条的方法,感兴趣的朋友不妨参考下,或许对你认识...
  • 原理:实际上滚动条还是存在的,只是中间套一层div让它的宽度比父div的宽度还要大,

    原理:实际上滚动条还是存在的,只是中间套一层div让它的宽度比父div的宽度还要大,因此遮住了滚动条从而实现可以滚动的效果;


    实现:

    固定宽度的父模块加上样式:{width: 70px;overflow: hidden;}

    中间套一层div设置height(可以设置为100%),设置width而且一定要比父div大(可以自己调整大小直到遮住滚动条就好),加上样式:

    {
        width: 76px;
        overflow-y: auto;
        overflow-x: hidden;
        height:100%;
    }


    举个例子:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>


    <div style="border:1px solid black;width: 100px;height:200px;overflow: hidden;">
    <div style="width: 118px;overflow-y: auto;overflow-x: hidden;height:100%;background-color:#f5f5f5;">
    <ul>
    <li data-attr="0"><a href="javascript:void(0);">测试1</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试2</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试3</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试4</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试5</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试6</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试7</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试8</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试9</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试10</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试11</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试12</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试13</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试14</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试15</a></li>
    <li data-attr="0"><a href="javascript:void(0);">测试16</a></li>
    </ul>
    </div>
    </div>


    </body>
    </html>

    展开全文
  • $(window).scroll(function () { var scrollHeight = document.documentElement.scrollTop; $("#WaitLst").css({ top: scrollHeight + 200 + "px" }).... //WaitList 是 div ID }); 转载于:https://www.cnblo...

    $(window).scroll(function () {

    var scrollHeight = document.documentElement.scrollTop;

    $("#WaitLst").css({ top: scrollHeight + 200 + "px" }).show(); //WaitList 是 div ID

    });

    转载于:https://www.cnblogs.com/duogemajia/archive/2012/02/20/2359048.html

    展开全文
  • html中div滚动条

    万次阅读 2017-09-22 11:26:26
    在我们的网页设计中经常要用到的元素就是div,今天偶然要用的div来做一个隐藏与显示滚动条: div 加滚动条的方法: 1、超出后在自动显示滚动条 ...div 设置上下滚动条自适应显示:overflow-y :aut

    在我们的网页设计中经常要用到的元素就是div,今天偶然要用的div来做一个隐藏与显示滚动条:

    div 加滚动条的方法:

    1、超出后在自动显示滚动条
    div 设置滚动条显示:overflow :yes
    div 设置滚动条自适应显示:overflow :auto
    div 设置上下滚动条显示:overflow-y :yes
    div 设置上下滚动条自适应显示:overflow-y :auto

    2、如果想无论超出或者没有超出的时候都要显示滚动条则可以进行如下设置

    overflow-y:scroll;

    展开全文
  • 滚动条可以用任何财产触发overflow,overflow-x或overflow-y每个可以被设置为任意的visible,hidden,scroll,auto,或inherit。您当前正在查看以下两个:auto-此值将查看盒子的宽度和高度。如果已定义它们,则不会...
  • //当内容宽度超出div宽度,或者内容高度超出div宽度,或者同时超出,会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;//当内容宽度超出div宽度,自动出现水平滚动条 overflow-y:auto;//当内容...
  • div不随滚动条的移动而改变位置

    热门讨论 2012-01-12 11:46:56
    div固定在屏幕的一个位置,不随滚动条的拖动而改变位置
  • 我有一个附加到div的webkit滚动条.我通过在body元素中将overflow属性设置为hidden来禁用默认滚动条.我可以看到附加到div滚动条,但看不到它的拇指,因此也无法滚动.附加滚动条div具有id =“container”.这是css –...
  • 无标题文档.css{width:50px;border:1px solid red;/*overflow-x:scroll;左右滚动overflow-x:scroll;上下滚动overflow属性: 检索... 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidde...
  • DIV滚动条设置 CSS滚动条显示与滚动条隐藏 对div设置滚动条,设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架...
  • div层随滚动条滚动

    2012-01-12 17:34:21
    //左右移动滚动条 var scrollDivEl = $(".scrollDiv"); var scrollDivEl2 = $(".scrollDiv2"); var scrollHtml =$('#scrollTd').html(); //1.div左测表头高度控制...
  • 问题:iframe 上下滚动条如何默认在下方,做的是聊天工具,数据多了,每次刷新出现的上下滚动默认在上方,还需下拉到下面才能看到聊天记录,有办法让它出现在下方吗? 答案:直接在iframe里写window.scrollTo(0,...
  • html自定义的DIV垂直滚动条

    万次阅读 2016-06-24 12:24:47
    首先说一下自定义滚动条的一个要求:鼠标滚动在它div上滚动时,如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样 让一个div拥有滚动条 1、只有垂直滚动条 #mydiv1 {  position: relative;  overflow-...
  • DIV滚动条

    2010-02-23 17:37:00
    所谓DIV滚动条,就是利用DIV标签,在里面...1、滚动条常用属性:overflow:auto为自动,scroll为出现滚动条overflow-x:横向滚动条overflow-y:纵向滚动条 代码样例: <div style="width:260px;height:120...
  • DIV滚动条显示

    千次阅读 2010-08-17 10:38:00
    DIV滚动条所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场1、滚动条常用属性:overflow:auto为自动,scroll为出现...
  • 核心代码 /* 滚动条自动上下滚动 */ scrollBar(); function scrollBar() { var height = $('.layui-table-body').height(); var number = 0; var length = 0; var time = setInter
  • 那么该如何实现div滚动条移动。使用css的定位属性position,设其值为fixed即可,该属性是将指定元素绝对定位于窗体,使用left,right,top和bottom属性来设置偏移于窗体原点的位置。示例:.mainBox{m...
  • div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置滚动条相关的属性。 [code="html"] .testDiv{ border-style: solid ; border-width: 50px ; ...
  • div添加滚动条常见属性

    千次阅读 2012-01-12 11:32:34
    div添加滚动条常见属性 2010-12-17 分类: 由于页面上的表里的末一列的内容太多,显示的内容不美观了,就想在这一列上加滚动条,在网上搜了一下,用div可以实现,感觉还不错,下面的是在网上查到的。   ...
  • div 滚动条

    2014-10-24 22:27:00
    在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll; 总是显示纵向滚动条 */ scrollbar-face-color: #006400;/*'滚动条凸出部分...
  • 元素在一个内嵌的带滚动分页加载的div内,无法立即获取。 解决方案 document.getElementsByClassName('dataTables_scrollBody')[0].scrollTop=100000 先在Chorme浏览器F12控制台中尝试上面这段语句的效果,如果不起...
  • <div id="box" style="background:pink;overflow-y:scroll;word-break:break-all;...滚动条进行精确定位,即能查找滚动条的位置和设置滚动条的初始位置。 scrollLeft属性也可以进行控制。  
  • css 中div不用设定高度,自动根据内容出现滚动条css部分 .parent{ position:relative; height:100%;//高度根据需求自行设定 } .child{ position:absolute; left:0; top:0; right:0; bottom:0; //left,top,...
  • CSS设置div滚动条样式的示例

    千次阅读 2019-03-21 09:47:14
    /自动出现滚动条,如果要出现竖直滚动条则改成:overflow-y:auto,如果横向出现滚动条则改成:overflow-x:auto/ scrollbar-face-color:#F00;/滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动的...
  • 可以在一同页使用多个移动块,由于使用类设计,有效地避免变量命名的冲突问题。
  • DIV显示滚动条

    2011-07-18 13:38:40
    做了大半年页面,都没有遇到过要人div出现滚动条的情况,突然遇到还有点措手不及 - -! 下面是正文: 1、其实就是设置一下DIV的css样式 主要是 [color=red]overflow[/color] 这个属性。 2、相关属性 滚动条相关...
  • 在谷歌浏览器下实现div的无缝上下滚动 <body> <div class="list" > <div class="list_child" id="marquee" style="overflow: hidden;"> <div">请V101188到0111号窗口</...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,947
精华内容 5,178
关键字:

div自动上下滚动条