`

div显示滚动条

阅读更多

div显示滚动条

基本是通过CSS去实现滚动条。
(1)垂直滚动条
设置是否显示滚动条主要是在CSS中设置下列的属性: 

overflow: visible | auto | hidden | scroll
overflow-x:横向滚动条
overflow-y:纵向滚动条

参数的意义: 
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条 
overflow:auto; 这个表示当你内容超过div高度出现垂直的滚动条
所以我们想在需要的时候显示垂直的滚动条,可以这么实现:

<div style="overflow:auto;">...</div>

或者

<div style="overflow-y:auto;">...</div>

(2)水平滚动条
如果只想出现水平的滚动条,一般还要配合禁止换行的设置,例如:

<div style="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>

(3)滚动条的外观
在IE中,主要是使用各种颜色属性:

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;设置或检索滚动条的拖动区域颜色 

在Chrome中,基本上是使用webkit专用属性设置:

::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border:2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
分享到:
评论

相关推荐

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

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

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

    2. **CSS样式问题**:错误的CSS设置,如`overflow`属性设置不当,可能导致滚动条无法显示或工作。 3. **WebView设置问题**:WebView的默认配置可能阻止了滚动条的正常工作,例如禁用了JavaScript或者设置了不恰当的...

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

    2. **滚动条**: 当div的内容超出其宽度或高度时,浏览器会自动显示滚动条,以便用户查看隐藏的内容。 3. **jQuery**: jQuery是JavaScript的一个库,提供了丰富的API,简化了JavaScript编程,如选择器、事件处理、...

    给div加滚动条 div显示滚动条设置代码

    在添加滚动条之前,开发者需要注意为div元素设置高度和宽度,否则滚动条可能不会正确显示。 要给div添加滚动条,主要有以下几种方法: 1. 直接设置overflow属性为auto或scroll。当内容超出div设定的高度和宽度时,...

    DIV动态显示滚动条

    本篇文章将深入探讨如何通过 JavaScript(特别是结合 jQuery 库)来实现`DIV`动态显示滚动条的功能。 首先,了解基本的 HTML 结构是必要的。一个包含滚动条的`DIV`可能如下所示: ```html &lt;div id="scrollDiv" ...

    div滚动条优化

    首先,我们要了解默认滚动条的样式通常是浏览器自带的,不同的浏览器可能显示不同,这可能不符合设计师对页面整体风格统一的要求。因此,优化滚动条主要是为了实现自定义的外观和行为,例如将滚动条变为半透明,以更...

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

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

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    使用div做滚动条

    此属性有两个重要的值:`auto`(自动显示滚动条)和`scroll`(始终显示滚动条)。根据需求选择其中之一。 - 使用`width`和`height`属性定义`&lt;div&gt;`的宽度和高度。 - 可选地,还可以使用`padding`为内容添加内边距...

    一款好看的DIV+CSS滚动条

    滚动条通常在内容超过容器显示范围时出现,允许用户浏览隐藏的部分。在默认情况下,浏览器会提供标准的滚动条样式,但这些样式可能无法满足设计师对于界面美观和一致性的需求。因此,利用CSS,我们可以自定义滚动条...

    鼠标滚动div内容

    设置`overflow: auto`或`overflow: scroll`将使div显示滚动条,让用户能够查看隐藏的内容。 2. **JavaScript事件监听** JavaScript提供了事件监听功能,例如`addEventListener`,用于在用户滚动鼠标时触发相应的...

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

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

    利用div+jquery自定义滚动条

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

    div 加滚动条 多样式

    默认情况下,浏览器会在需要时自动显示滚动条,但我们可以用以下代码强制显示滚动条: ```css div { overflow: auto; /* 显示水平和垂直滚动条 */ overflow-x: auto; /* 只显示水平滚动条 */ overflow-y: auto; ...

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

    - **`overflow`属性**:设置为`scroll`强制显示滚动条。 - **自定义滚动条样式**:通过`::-webkit-scrollbar`系列伪元素进行个性化设计。 5. **滚动条自定义样式示例** - **更改颜色**: ```css ::-webkit-...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    如果表格嵌套在具有滚动条的div元素内,则需要确保该div元素的宽度不被内部滚动条所影响。具体做法是将div内的表格容器(tableContainer)以及表格主容器(tableMain)的宽度设置为与表格头部(tableMainHead)的宽度一致...

    jquery使用div实现滚动条效果

    滚动条是当内容超出容器显示范围时出现的一种用户界面元素,允许用户查看或浏览不可见的部分。在HTML中,滚动条通常是浏览器自动处理的,但通过CSS和JavaScript,我们可以自定义和控制滚动条的行为和样式。 在...

    拖动div 内部有滚动条

    7. **响应式设计**:如果项目需要适应不同设备和屏幕尺寸,拖动功能需要考虑到响应式布局,可能需要根据窗口大小动态调整 `div` 的大小和滚动条的显示。 8. **优化性能**:处理大量数据时,频繁的 DOM 操作可能会...

    DIV常见任务(上) —常规任务(显示滚动条/隐藏div/禁止事件冒泡等等)

    DIV在Web开发中起着至关重要的作用,这里总结一下我在使用DIV中遇到的各种操div显示滚动条/禁止div的事件冒泡/禁止div执行默认的行为/动态计算div的位置(比如常见的计算div弹出层的位置) /隐藏div元素等等,感兴趣的...

Global site tag (gtag.js) - Google Analytics