精华内容
下载资源
问答
  • HTML滚动条

    千次阅读 2018-01-14 16:15:07
    同时简单介绍几种HTML滚动条代码:1、向右滚动代码:<div id="colee_right" style="overflow:hidden;width:760px;"><table cellpadding="0" cellspacing="...

    由于四象限中可能会有很多任务,可能会超出象限大小,所以需要加上滚动条。


    一般是:overflow:auto这个属性;

    同时简单介绍几种HTML滚动条代码:

    1、向右滚动代码:

    <div id="colee_right" style="overflow:hidden;width:760px;">

    <table cellpadding="0" cellspacing="0" border="0">

    <tr><td id="colee_right1" valign="top" align="center">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    </tr>

    </table>

    </td>

    <td id="colee_right2" valign="top"></td>

    </tr>

    </table>

    </div>

    <script>

    var speed=30//速度数值越大速度越慢

    //var colee_right2=document.getElementByIdx_x_x("colee_right2");

    //var colee_right1=document.getElementByIdx_x_x("colee_right1");

    //var colee_right=document.getElementByIdx_x_x("colee_right");

    colee_right2.innerHTML=colee_right1.innerHTML

    function Marquee4(){

    if(colee_right.scrollLeft<=0)

    colee_right.scrollLeft+=colee_right2.offsetWidth

    else{

    colee_right.scrollLeft--

    }

    }

    var MyMar4=setInterval(Marquee4,speed)

    colee_right.οnmοuseοver=function() {clearInterval(MyMar4)}

    colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}

    </script>

    <!--向右滚动代码结束-->

    2、向左滚动代码:

    <!--下面是向左滚动代码-->

    <div id="colee_left" style="overflow:hidden; width:760px;">

    <table cellpadding="0" cellspacing="0" border="0">

    <tr><td id="colee_left1" valign="top" align="center">

    <table cellpadding="2" cellspacing="0" border="0">

    <tr align="center">

    <td>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </td>

    <td id="colee_left2" valign="top"></td>

    </tr>

    </table>

    </div>

    <script>

    //使用div时,请保证colee_left2与colee_left1是在同一行上.

    var speed=30//速度数值越大速度越慢

    //var colee_left2=document.getElementByIdx_x("colee_left2");

    //var colee_left1=document.getElementByIdx_x("colee_left1");

    //var colee_left=document.getElementByIdx_x("colee_left");

    colee_left2.innerHTML=colee_left1.innerHTML

    function Marquee3(){

    if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度

    colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度

    else{

    colee_left.scrollLeft++

    }

    }

    var MyMar3=setInterval(Marquee3,speed)

    colee_left.οnmοuseοver=function() {clearInterval(MyMar3)}

    colee_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}

    </script>

    <!--向左滚动代码结束-->

    3、向上滚动代码:

    <!--向上滚动代码开始-->

    <div id="colee" style="overflow:hidden;height:400px;width:550px;">

    <div id="colee1">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    </tr>

    </table>

    </div>

    <div id="colee2"></div>

    </div>

    <script>

    var speed=30;

    //var colee2=document.getElementByIdx_x("colee2");

    //var colee1=document.getElementByIdx_x("colee1");

    //var colee=document.getElementByIdx_x("colee");

    colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

    function Marquee1(){

    //当滚动至colee1与colee2交界时

    if(colee2.offsetTop-colee.scrollTop<=0){

    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

    }else{

    colee.scrollTop++

    }

    }

    var MyMar1=setInterval(Marquee1,speed)//设置定时器

    //鼠标移上时清除定时器达到滚动停止的目的

    colee.οnmοuseοver=function() {clearInterval(MyMar1)}

    //鼠标移开时重设定时器

    colee.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}

    </script>

    <!--向上滚动代码结束-->

    4、向下滚动代码:

    <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">

    <div id="colee_bottom1">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    <td style="padding-left:10px;"><img src="aa.jpg" /></td>

    </tr>

    </table>

    </div>

    <div id="colee_bottom2"></div>

    </div>

    <script>

    var speed=30

    var colee_bottom2=document.getElementByIdx_x("colee_bottom2");

    var colee_bottom1=document.getElementByIdx_x("colee_bottom1");

    var colee_bottom=document.getElementByIdx_x("colee_bottom");

    colee_bottom2.innerHTML=colee_bottom1.innerHTML

    colee_bottom.scrollTop=colee_bottom.scrollHeight

    function Marquee2(){

    if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)

    colee_bottom.scrollTop+=colee_bottom2.offsetHeight

    else{

    colee_bottom.scrollTop--

    }

    }

    var MyMar2=setInterval(Marquee2,speed)

    colee_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}

    colee_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}

    </script>

    同时注意还有其他滚动代码的分享:

    一、向左滚动:<marquee scrollAmount="2" direction="left" width="滚动区域宽度" height="滚动区域高度" onMouseOver="stop()" onMouseOut="start()">这里放滚动的内容</marquee>

    二、向上滚动:<marquee scrollAmount="2" direction="up" width="滚动区域宽度" height="滚动区域高度" onMouseOver="stop()" onMouseOut="start()">这里放滚动的内容</marquee>。


    展开全文
  • HTML滚动条样式代码及使用技巧

    万次阅读 2019-06-12 10:02:43
    HTML滚动条样式代码及使用技巧 在html网页中,我们都知道大篇幅的长文章会占据网页的大部分空间,影响了整体网站页面的美观性和阅读体验,因此,在html网页中添加一个带有滚动条的文本框,就可以很好地解决上述问题...

    HTML滚动条样式代码及使用技巧

    在html网页中,我们都知道大篇幅的长文章会占据网页的大部分空间,影响了整体网站页面的美观性和阅读体验,因此,在html网页中添加一个带有滚动条的文本框,就可以很好地解决上述问题。网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页

    html中滚动条属性设置
    scrollbar属性、样式详解

    1、overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

    2、 scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)
    scrollbar-arrow-color上下按钮上三角箭头的颜色
    scrollbar-base-color滚动条的基本颜色
    scrollbar-dark-shadow-color立体滚动条强阴影的颜色
    scrollbar-face-color立体滚动条凸出部分的颜色
    scrollbar-highlight-color滚动条空白部分的颜色
    scrollbar-shadow-color立体滚动条阴影的颜色

    HTML各种滚动属性代码

    <marquee>普通卷动</marquee> <br />   
    <marquee behavior=slide>滑动</marquee>  <br />  
    <marquee behavior=alternate>来回卷动 </marquee><br /> 
    <marquee direction=down>向下卷动</marquee> <br /> 
    <marquee direction=up>向上卷动</marquee> <br /> 
    <marquee direction=right>向右卷动</marquee> <br /> 
    <marquee direction=left>向左卷动</marquee> <br /> 
    <marquee loop=2>卷动次数</marquee> <br />   
    <marquee scrollamount=30>设定卷动距离</marquee> <br /> 
    

    html滚动条颜色设置方法介绍

    scrollbar-arrow-color: color; /*三角箭头的颜色*/
    scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
    scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
    scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
    scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
    scrollbar-track-color: color; /*立体滚动条背景颜色*/
    scrollbar-base-color: color; /*滚动条的基色*/
    

    webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素:

    -webkit-scrollbar 滚动条整体部分
    -webkit-scrollbar-button 滚动条两端的按钮
    -webkit-scrollbar-track 外层轨道
    -webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    -webkit-scrollbar-thumb (拖动条)
    -webkit-scrollbar-corner 边角
    -webkit-resizer 定义右下角拖动块的样式
    

    html滚动条使用技巧

    1.让浏览器窗口永远都不出现滚动条

    没有水平滚动条

    <body style="overflow-x:hidden">
    

    没有垂直滚动条

    <body style="overflow-y:hidden">
    

    没有滚动条

    <body style="overflow-x:hidden;overflow-y:hidden">或<body
    style="overflow:hidden">
    

    2.设定多行文本框的滚动条

    没有水平滚动条

    <textarea style="overflow-x:hidden"></textarea>
    

    没有垂直滚动条

    <textarea style="overflow-y:hidden"></textarea>
    

    没有滚动条

    <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
    或<textarea style="overflow:hidden"></textarea>
    

    3.设定窗口滚动条的颜色

    设置窗口滚动条的颜色为红色
    scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
    加上一点特别的效果:

    <body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
    

    4.在样式表文件中定义好一个类,调用样式表。

    <style>
    .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
    </style>
    

    这样调用:

    Scrollbar-Face-Color为滚动条表面颜色设定;
    Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;
    Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;
    Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;
    Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
    Scrollbar-Track-Color为滚动条底板颜色设定;
    Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

    举例:

     <textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>
    

    5.如何在单元格或图层中出现滚动条

    <divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>
    

    (3)javascript改变框架中滚动条的样式,比如改变颜色、改为平面效果等

    <STYLE> 
    
    BODY   {SCROLLBAR-FACE-COLOR:   #ffcc99;
    
                  SCROLLBAR-HIGHLIGHT-COLOR:   #ff0000; 
    
                  SCROLLBAR-SHADOW-COLOR:   #ffffff; 
    
                  SCROLLBAR-3DLIGHT-COLOR:   #000000; 
    
                  SCROLLBAR-ARROW-COLOR:   #ff0000; 
    
                  SCROLLBAR-TRACK-COLOR:   #dee0ed; 
    
                  SCROLLBAR-DARKSHADOW-COLOR:   #ffff00;} 
    
    </STYLE> 
    

    说明:

    scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色;

    scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色;

    scrollbar-face-color:color;设置或检索滚动条3D表面的颜色;

    scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色;当滚动条出现但不可用时,此属性失效;

    scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色;

    scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色;

    scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。

    scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色

    滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.

    展开全文
  • html滚动条代码

    2013-10-30 12:52:31
    本篇是一份HTML网面滚动代码,为你在制作网页时更加快捷,方便。
  • 关于HTML滚动条问题

    千次阅读 2016-10-09 19:18:52
    html怎么不显示滚动条 两种方法:1.内联式;2.嵌入式; 同时改竖直方向和水平方向时用overflow属性即可<!DOCTYPE html> <html lang="en"> <title>Title <!-- html{ overflow

    html怎么不显示滚动条
    两种方法:1.内联式;2.嵌入式;
    同时改竖直方向和水平方向时用overflow属性即可

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--<style>
            html{
                overflow-x: hidden;
                overflow-y: hidden;
            }
        </style>-->
    
       </head>
    <body><!--style="overflow-x: hidden;overflow-y: hidden"-->
    <div id="header" style="width: 1600px;height: 400px;">我是头部</div>
    <div id="M"  style="width: 1600px;height: 400px;">我是中部</div>
    <div id="bottom"  style="width: 1600px;height: 400px;">我是底部</div>
    </body>
    </html>
    

    HTML在需要时加入滚动条
    把overflow属性改为auto;
    滚动条在浮动框架中的使用

    这里写图片描述


    附:iframe标签及其属性:
    这里写图片描述

    展开全文
  • HTML 滚动条实现

    千次阅读 2019-04-02 11:08:00
    ##在对应的div中,添加overflow,固定高度为... 没有水平滚动条 " overflow-x:hidden " > 没有垂直滚动条 " overflow-y:hidden " >   转载于:https://www.cnblogs.com/zhuguangzhe/p/10641410.html
    ##在对应的div中,添加overflow,固定高度为400px
    <div class="panel-body" style="height: 400px; overflow:scroll"> <div style="border: 1px #000000; width: 90%; margin: 0 auto;"> <span> </span> </div> </div> 没有水平滚动条 <textarea style="overflow-x:hidden"></textarea> 没有垂直滚动条 <textarea style="overflow-y:hidden"></textarea>

     

    转载于:https://www.cnblogs.com/zhuguangzhe/p/10641410.html

    展开全文
  • 去掉横向滚动条:overflow-x: hidden;滚动条样式: 1.带背景颜色的实线边框滚动条200px;SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:#33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; ...
  • html滚动条实现,超简单

    万次阅读 多人点赞 2018-07-04 14:22:55
    在对应的div中,添加overflow,固定高度为400px ; overflow:scroll"> ...水平、垂直滚动条就都有了!也可固定width 垂直滚动条 ; overflow-y:scroll"> ; width: 90%; margin: 0 auto;"> </div>
  • 滚动条基本知识: 建议比价华丽的页面使用overflow:scroll这个样式的滚动条,比较好看。 scrollbar属性、样式详解 1. overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的...
  • html滚动条到底不断加载数据代码

    千次阅读 2016-10-12 18:02:17
    //滚动条滚动长度 var sh = $(window).scrollTop(); if(wh+sh>bh){ loaddata(); } }) }); function loaddata(){ var html = "<div>test</div>"; $('body').append(html); };
  • 我在做HTML页面时,使用多个可折叠内容块。 当第一个div浏览到底部时点击另一个div展开的div直接显示内容的中间部分。请问有大牛知道如何解决么。
  • HTML滚动条DIV测试

    千次阅读 2011-05-10 20:39:00
    <html xmlns="http://www.w3.org/1999/xhtml"> 博客 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:style><!-- li{font-size:12px;} .aut{float:right;
  • html 滚动条不影响页面宽度

    千次阅读 2017-04-10 10:15:00
    转载于:https://www.cnblogs.com/lushixiong/p/6687739.html
  • HTML自定义滚动条(仿网易邮箱滚动条)代码
  • 广告 滚动条 单个html

    2017-07-18 13:02:42
    广告 滚动条 单个html
  • html 底部出现滚动条 去掉滚动条

    万次阅读 2017-03-31 15:03:16
    网页的宽度超过了屏幕宽度,所以系统自动添加滚动条 CSS 禁止滚动条,有4种方法,具体如下: 1、完全隐藏 在<body>里加入scroll="no",可隐藏滚动条; <body scroll="no"> 2、在不需要时隐藏 指当...
  • html,css手机滚动条滑动的时候显示滚动条,不滑动的时候滚动条隐藏
  • HTML 隐藏滚动条和去除滚动条的方法

    千次阅读 2019-04-10 21:47:07
    这篇文章主要介绍了HTML 隐藏滚动条和去除滚动条的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 1. html 标签加属性 XML/HTML Code复制内容到剪贴板 1 <html lang="en...
  • html 表格加滚动条

    万次阅读 2017-02-22 13:15:28
    2.设定表格的宽度比Div小一个滚动条的宽度(如Div宽度为500,滚动条宽度为16,则表格的宽度应该设置为500-16=484)。 3.表格采用 thead,th标签       Header  1  Header  2
  • HTML5滚动条

    千次阅读 2019-02-28 09:30:51
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...滚动条&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;marquee behavior="alterna
  • html中div滚动条

    万次阅读 2017-09-22 11:26:26
    在我们的网页设计中经常要用到的元素就是div,今天偶然要用的div来做一个隐藏与显示滚动条: div 加滚动条的方法: 1、超出后在自动显示滚动条 div 设置滚动条显示:overflow :yes div 设置滚动条自适应显示:...
  • HTML网页滚动条滚动插件(匀速滚动,支持向上向下滚动)
  • HTML中的滚动条/去掉滚动条

    千次阅读 2014-09-15 22:10:01
    xhtml下frame页面横向滚动条的问题 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释...
  • HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式 实现效果图: HTML代码 <div class="list scroll"> <div class="list-item">测试滚动条</div> <div class="list-item">测试...
  • HTML页面table滚动条的实现

    万次阅读 2018-05-08 14:46:29
    有很多页面由于数据量过大,会产生横纵滚动条。为了便于使用者观看,我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。 主要解决了几点问题: 1.table实现横纵滚动条 2.table表头固定 3.table...
  • 关于HTML中的滚动条/去掉滚动条问题

    千次阅读 2018-04-14 15:03:38
    原理:强制显示ie的垂直滚动条,而忽略水平滚动条。 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype 。 缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。 方法2: 代码: html { ...
  • html5极酷滚动条3D特效

    千次下载 热门讨论 2014-03-04 15:08:12
    国外超炫3D滚动条拉动特效,有翻转,旋转,波浪……总共12款炫酷html5特效免积分赠送
  • 为div添加滚动条.html

    2014-04-16 18:42:00
    为div添加滚动条 html 欢迎下载
  • html中div加滚动条

    万次阅读 2019-06-14 16:37:22
    div 加滚动条的两种方法: 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 不过在不超出时,会有下面的滚动条,所以不是最好的选择 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 187,298
精华内容 74,919
关键字:

html滚动条