`
alvinqq
  • 浏览: 184978 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

div的滚动条效果

    博客分类:
  • css
 
阅读更多
div嵌套表格实现竖行的滚动

   <DIV style="BORDER-RIGHT: #6495ed 1px solid; BORDER-TOP: #6495ed 3px solid; BORDER-LEFT: #6495ed 1px solid; BORDER-BOTTOM: #6495ed 1px solid; width:400px;margin-left:22px;">
   <DIV id=headerDiv style="OVERFLOW: hidden; WIDTH: 400px">
      <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#d0e7ef border=0>
        <TBODY>
         <TR style="TEXT-ALIGN: left">
           <Td width=140 height=20><strong>Server/Factions</strong></Td>
           <Td width=135><strong>Price</strong></Td>
           <Td width=60><strong>Status</strong></Td>
           <Td width=65><strong>Buy</strong></Td>
         </TR>
        </TBODY>
       </TABLE>
      </DIV>
      <DIV style="OVERFLOW-y: auto;OVERFLOW-x: hidden; WIDTH: 400px; HEIGHT: 105px" onscroll="document.getElementById('headerDiv').scrollLeft = scrollLeft">
      <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#f9f9f9 border=0>
        <TBODY>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
<TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
    <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        <TR>
          <TD width=140 height=20>Server/Factions</TD>
          <TD width=150>PricePricePrice</TD>
          <TD width=55>Status</TD>
    <TD width=55>BuyBuy</TD>
        </TR>
        </TR>
        </TBODY>
        </TABLE>
        </DIV>
        </DIV>

 

 

div横行的滚动条

<div style="PADDING-RIGHT: 10px; 
             OVERFLOW-Y: auto; PADDING-LEFT: 10px;
             SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px; 
             SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 200px; 
             SCROLLBAR-SHADOW-COLOR: #919192; COLOR: blue; 
             SCROLLBAR-3DLIGHT-COLOR:#ffffff; LINE-HEIGHT: 100%; 
             SCROLLBAR-ARROW-COLOR: #919192; PADDING-TOP: 0px; 
             SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: 宋体; 
             SCROLLBAR-DARKSHADOW-COLOR: #ffffff; LETTER-SPACING: 1pt; HEIGHT: 500px; TEXT-ALIGN: left; background-repeat: no-repeat;">
             
             你需要的放置的内容
            </div>

 

div华丽的竖行滚动条

<!--*********信息内容开始********-->
   <div style="
     PADDING-LEFT: 36px;
     PADDING-BOTTOM: 0px;
     WIDTH: 526px; HEIGHT: 100px;
     color:#000000;
     margin-top:36px;
     /*---------滚动条样式开始------------*/
        /*OVERFLOW-Y: auto; 垂直滚动条,OVERFLOW-X: auto; 左右滚动条*/
     OVERFLOW: auto;
              SCROLLBAR-FACE-COLOR: #6D4110;  
              SCROLLBAR-HIGHLIGHT-COLOR: #3C140C;
              SCROLLBAR-SHADOW-COLOR: #3C140C;
              SCROLLBAR-3DLIGHT-COLOR:#3C140C; 
              SCROLLBAR-ARROW-COLOR: #919192; 
              SCROLLBAR-TRACK-COLOR: #3C140C;
              SCROLLBAR-DARKSHADOW-COLOR: #3C140C;
     /*---------滚动条样式结束------------*/
     ">
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
     信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容,
   </div>  
 

需要注意的参数是:

SCROLLBAR-FACE-COLOR         /*立体滚动条凸出部分的颜色*/
SCROLLBAR-HIGHLIGHT-COLOR    /*滚动条空白部分的颜色*/
SCROLLBAR-SHADOW-COLOR       /*立体滚动条阴影的颜色*/
SCROLLBAR-ARROW-COLOR        /*上下按钮上三角箭头的颜色*/
SCROLLBAR-BASE-COLOR         /*滚动条的基本颜色*/
SCROLLBAR-DARK-SHADOW-COLOR  /*立体滚动条强阴影的颜色*/
SCROLLBAR-3DLIGHT-COLOR      /*滑动条以及三角箭头左边上边的颜色*/
SCROLLBAR-TRACK-COLOR        /*滑动条凹槽内的颜色*/
SCROLLBAR-DARKSHADOW-COLOR   /*滑动条以及三角箭头右边下边的颜色*/

分享到:
评论

相关推荐

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...

    Android手机版浏览器DIV滚动条失效解决方案

    // 禁止滚动条淡化效果 ``` 对于Web内容的滚动,可以使用以下方法: ```java webView.setWebChromeClient(new WebChromeClient()); webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm....

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中,jQuery是一个非常...总的来说,通过jQuery的`animate()`方法,我们可以轻松地实现div滚动条的动态控制,为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    DIV滚动悬浮层(滚动条动,层不动)

    通过这种方式,当页面滚动时,悬浮层会根据我们的需求进行动态调整,实现"滚动条动,层不动"的效果。 当然,实际的项目可能会更复杂,比如要考虑不同设备的响应式布局,或者添加动画效果等。但以上基础步骤已经涵盖...

    让div滚动条初始化到最低位置的三种方法

    ### 让div滚动条初始化到最低位置的三种方法 在前端开发中,有时我们需要实现一个功能,即在向某个特定的`div`容器内添加新内容后,使该`div`的滚动条自动滚动到最底部,以确保新添加的内容能够立即呈现在用户的...

    滚动条,div滚动条,图层下拉条

    总的来说,这个项目展示了如何使用现代Web技术,尤其是CSS3,来创建一个既实用又美观的滚动条效果。通过自定义滚动条样式,我们可以使网站更加个性化,并提供更好的用户体验。同时,图层下拉条的实现则进一步提升了...

    jquery使用div实现滚动条效果

    本篇文章将详细讲解如何利用jQuery实现一个div元素的滚动条效果,以及涉及到的相关知识点。 首先,我们需要理解滚动条的基本概念。滚动条是当内容超出容器显示范围时出现的一种用户界面元素,允许用户查看或浏览不...

    div随滚动条上下滚动

    在网页设计中,"div随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

    div模拟滚动条效果示例代码

    这个例子展示了如何使用HTML和CSS来模拟一个由div元素创建的滚动条效果。通过这种方式,我们可以控制滚动条的颜色、形状和位置,使其更加美观和个性化。 首先,让我们分析这段代码的关键部分。`&lt;div id="mainBox"&gt;`...

    一款好看的DIV+CSS滚动条

    压缩包内的文件可能包含示例CSS代码、HTML结构和可能的图片资源,帮助用户快速实现这样的滚动条效果。初学者可以通过查看和学习这些文件,理解如何将CSS应用到HTML元素上,从而实现自定义滚动条的设计。 总的来说,...

    jquery定制div滚动条Scrollbar

    标题中的“jquery定制div滚动条Scrollbar”涉及到的是一个使用jQuery库来实现自定义滚动条功能的技术。在网页设计中,滚动条通常是浏览器默认样式,但通过jQuery插件,我们可以为div元素创建具有个性化外观和交互...

    完美解决ASP.NET回传后div滚动条位置复位的问题

    ### 完美解决ASP.NET回传后div滚动条位置复位的问题 在ASP.NET开发过程中,经常遇到的一个问题是页面更新或回传后,原本已经滚动的`div`元素会自动复位到初始状态,这对于用户体验来说是十分不利的。本文将详细介绍...

    使用div做滚动条

    在Web开发中,为了优化用户体验并提高页面的美观度与功能性,经常需要在页面中创建自定义的滚动条效果。这种技术通常被称为“DIV滚动条”,其实现方式主要是通过HTML的`&lt;div&gt;`标签结合CSS样式来完成。本文将详细介绍...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    利用div+jquery自定义滚动条

    在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...

    js DIV滚动条随机位置的设置技巧.docx

    此外,这个技巧也可以与其他 JavaScript 技巧结合使用,例如,我们可以使用 JavaScript 来动态生成滚动条内容,并将其与随机位置设置结合起来,实现更加复杂的交互效果。 使用 JavaScript 实现 DIV 滚动条随机位置...

    Div滚动条随鼠标滚动js版(由网友JQuery版改写而成)

    在网页设计中,有时我们需要对特定的`div`元素实现自定义滚动条的效果,以便增强用户体验。本项目提供了一个JavaScript版本的解决方案,该方案最初基于jQuery实现,经过修改后适用于纯JavaScript环境,解决了在IE8...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...

Global site tag (gtag.js) - Google Analytics