`
xkahala
  • 浏览: 49708 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

滚动条进阶

    博客分类:
  • jsp
阅读更多

今天在项目中遇到一个要给一个多行一列的弹出页面增加滚动条的问题

终于找到解决方案了

     用个一个    div 包裹  table

然后设置 样式

<div style="overflow-y:scroll;width:100%;height:100%">

    <table width="100%">
        <tr>

 

滚动条 属性介绍:

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立体滚动条阴影的颜色

我们通过几个实例来讲解上述的样式属性:
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.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
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>
这样调用:
<textarea class="coolscrollbar"></textarea>

 

分享到:
评论

相关推荐

    Android 自定义横向滚动条联动进阶版

    Android 自定义横向滚动条联动进阶版。前一段时间写了一个自定义横向滚动条,感觉效果不怎样好。又开始改善结构,写了一个进阶版。标题和数据都可以横向联动。竖向也不影响。长按会横向移动到最右端,显示checkbx。...

    自定义滚动条

    ### 自定义滚动条知识点 #### 一、概念与应用场景 自定义滚动条是前端开发中一个常见的需求。在默认情况下,浏览器会为超出容器显示范围的内容自动添加滚动条。但这些滚动条样式单一且功能简单,无法满足某些设计...

    自定义滚动条API.docx

    更加进阶的使用:修改浏览器的滚动条 mCustomScrollbar 还提供了修改浏览器的滚动条样式的功能,允许开发者完全控制浏览器的滚动条行为。 mCustomScrollbar 是一个功能强大且灵活的插件,提供了多种方式来自定义...

    VC文件读写、滚动条、弹出对话窗绘图例程

    在本文中,我们将深入探讨如何使用Visual C++(VC)进行文件读写、滚动条操作、弹出对话框绘图以及在对话框控件中绘图。这些是MFC(Microsoft Foundation Classes)库中常见的功能,对于任何Windows应用程序开发者来...

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

    js DIV 滚动条随机位置的设置技巧 在 Web 开发中,DIV 滚动条是非常常见的交互元素,而随机设置 DIV 滚动条的位置可以增加用户体验的随机性和趣味性。今天,我们将介绍如何使用 JavaScript 实现 DIV 滚动条的随机...

    MATLAB GUI教学视频3:滚动条数值显示在文本框中_matlab源码.rar

    在MATLAB GUI中,滚动条和文本框是常见的组件,它们可以用于数据输入、显示和控制。 标题"MATLAB GUI教学视频3:滚动条数值显示在文本框中"涉及到的核心知识点包括: 1. **创建GUI**: 在MATLAB中,我们可以使用...

    jsScrolling 多彩网页滚动条插件附实例打包.zip

    **jsScrolling多彩网页滚动条插件详解及实例** 网页滚动条通常是浏览器默认样式,但随着网页设计的个性化发展,滚动条的外观和交互也变得越来越重要。`jsScrolling`是一个专门用于自定义网页滚动条样式的JavaScript...

    易语言指定滚动条到具体位置源码-易语言

    这个“易语言指定滚动条到具体位置源码”进阶教程,旨在帮助用户掌握易语言中与滚动条交互的高级技巧。通过学习和实践,你不仅可以理解如何控制滚动条,还能进一步提升自己在易语言中的编程能力,为创建更复杂的用户...

    易语言判断滚动条是否在底端源码-易语言

    在进阶教程中,源码可能包含更复杂的逻辑,例如事件驱动编程,比如当滚动条位置改变时自动触发某个事件或函数。`demo.e` 文件很可能是这个教程中的实际源码示例,可以使用易语言编译器打开并学习。通过分析和实践...

    易语言滚动条滑块大小设置源码 简单实现分组框滚动条-易语言

    在易语言编程中,滚动条(ScrollBar)是常见的控件之一,用于在用户界面中提供对大量信息的浏览和导航。滚动条通常包含两个部分:一个可移动的滑块(Slider)和两个箭头,允许用户上下或左右移动来查看隐藏的内容。...

    html 隐藏滚动条的简单实现

    在网页设计中,有时我们可能需要隐藏页面的滚动条,以提供更简洁的视觉效果或者在特定场景下保持页面布局的完整性。隐藏滚动条的方法多种多样,但在这里我们将重点介绍两种简单实现HTML隐藏滚动条的方法。 方法一:...

    易语言设置滚动条源码-易语言

    6. **编程实践**:进阶教程源码通常包含一些高级用法,如自定义滚动条样式、动态调整滚动范围或实现复杂逻辑。学习这样的源码可以帮助开发者提升对易语言滚动条控件的理解和应用能力。 在"易语言设置滚动条源码.e...

    易语言读写滚动条位置源码-易语言

    这个“易语言读写滚动条位置源码”是一个进阶教程,旨在帮助用户掌握如何在易语言中操作和控制滚动条的读取与设置位置。滚动条在很多图形用户界面(GUI)应用中都有广泛的应用,例如在文本编辑器、表格和浏览器中,...

    易语言自制滚动条源码-易语言

    本资源是关于易语言自制滚动条的源码,旨在帮助用户深入理解滚动条控件的使用和自定义实现,属于进阶教程的一部分。 在Windows程序设计中,滚动条是一种常见的用户界面元素,它允许用户查看和浏览超过屏幕大小的...

    易语言隐藏滚动条源码-易语言

    在这个"易语言隐藏滚动条源码"的压缩包中,我们主要关注的是如何在易语言中实现窗口或控件的滚动条隐藏功能。 首先,我们要理解滚动条的作用。在窗口或控件中,滚动条通常用于浏览超过当前视图范围的内容。在某些...

    易语言屏蔽超级列表框滚动条源码-易语言

    本资源“易语言屏蔽超级列表框滚动条源码”是一份针对易语言的进阶教程源码,旨在帮助用户掌握如何在易语言中操作和控制控件,特别是超级列表框这一常见的界面元素。 超级列表框是易语言中常用的一种控件,它通常...

    易语言窗口滚动条源码-易语言

    例如,`设为滚动条最大值`、`设为滚动条最小值`、`设为滚动条当前位置` 和 `设为滚动条步长` 分别用于设置滚动条的最大、最小、当前位置和每次滚动的距离。 接下来,我们来创建滚动条。在易语言中,可以使用“创建...

    易语言滚动条置颜色源码-易语言

    易语言滚动条置颜色源码是一个关于编程技术的实践示例,主要针对易语言这一中国本土化的编程语言。易语言以其独特的中文编程语法,降低了编程的门槛,使得更多非计算机专业的人也能参与到软件开发中来。这个源码是...

    隐藏并禁止超文本浏览框的滚动条-易语言

    在易语言编程中,隐藏并禁止超文本浏览框(HyperText Browsing Box)的滚动条是一项常见的需求,尤其是在设计用户界面时,为了提供更整洁、更专业的视觉效果。本教程将详细讲解如何实现这一功能,并提供一个源码示例...

    易语言API滚动条操作源码-易语言

    在本案例中,"易语言API滚动条操作源码"是一个进阶教程,旨在教授如何使用易语言调用API函数来控制和操作GUI中的滚动条。 滚动条是图形用户界面(GUI)中常见的一种控件,通常用于浏览或调整大量信息。在易语言中,...

Global site tag (gtag.js) - Google Analytics