`

html中滚动条的样式

 
阅读更多
DIV滚动条设置 (CSS)2008/09/26 03:07div 中滚动条的控制2008年01月06日 星期日 01:181)隐藏滚动条
<body style="overflow-x:hidden;overflow-y:hidden">
(2)如何在单元格或图层中出现滚动条
<div style="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;设置或检索滚动条的拖动区域颜色
备注:
color为你要设置的颜色代码,可以是16进制的,比如#FF0000,可以是以RGB表示的,比如rgb(255,0,255);设置滚动条样式的时候不必要把所有的属性都用上才会生效。
(4)javascript中的页面元素定位
clientX、clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;
offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;
screenX、screenY是鼠标相对于用户整个屏幕的位置;
x、y是鼠标当前相对于当前浏览器的位置
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(因为有滚动条的产生,所以目前页面可见内容是不定的)。
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left:对象相对于页面的X坐标。
top:对象相对于页面的Y坐标
(4)屏蔽选择,右键等
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">


分享到:
评论

相关推荐

    HTML中滚动条各种样式示例

    下面将详细介绍如何使用CSS来控制HTML中的滚动条样式。 1. **滚动条的基本样式** 默认情况下,滚动条由一个水平的滚动条(用于左右滚动)和一个垂直的滚动条(用于上下滚动)组成,包含一个滑块、轨道以及可能的...

    html滚动条样式

    HTML5页面滚动条样式的实现通常涉及到CSS3的伪元素选择器和JavaScript库,如jQuery,来增强浏览器默认滚动条的视觉效果。在本例中,我们关注的是如何使用jQuery和自定义CSS来定制HTML5页面中的滚动条,使得它们更...

    好看的滚动条样式

    在压缩包中的`css.html`文件中,很可能包含了上述知识点的详细解释和实例代码,你可以打开这个文件查看具体的内容,学习如何应用这些CSS属性来定制你自己的滚动条样式。通过自定义滚动条,不仅可以增强网页的美观性...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    在实际项目中,确保滚动条样式与整体设计保持一致非常重要,这不仅可以提升用户体验,还能增强网页的专业感。通过熟练运用HTML和CSS的这些特性,你可以创造出符合品牌风格且功能完善的滚动条。 总结,HTML和CSS提供...

    滚动条样式 html css

    本篇文章将深入探讨如何利用 HTML5 和 CSS3 的特性来实现自定义滚动条样式。 一、CSS3 自定义滚动条样式 在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-...

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中,我们经常需要在 DIV 元素中添加滚动条,以便在内容超出 DIV 区域时,能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    jquery修改滚动条样式

    在网页设计中,滚动条作为一个默认的用户交互元素,其样式通常由浏览器默认定义,但随着网页设计的个性化和用户体验的提升,自定义滚动条样式成为了一种趋势。`jQuery`,作为一款广泛使用的JavaScript库,提供了丰富...

    jquery滚动条样式

    在网页设计中,用户体验是一个非常重要的考虑因素,而滚动条作为页面交互的一部分,其样式和功能同样不容忽视。`jQuery`作为一个广泛...在实际开发中,可以根据项目需求选择合适的方法和工具,打造独特的滚动条样式。

    修改火狐滚动条样式(纯css).html

    修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式

    滚动条css精美样式

    4. "jquery_custom_scrollbar_vertical.html" 和 "index.html" 是HTML文件,其中包含了应用自定义滚动条样式的代码示例。 5. "mcsDraggerHover.png" 可能是滑块在鼠标悬停时的图像,展示了一个交互状态的变化。 6. ...

    好的的滚动条样式

    在这个例子中,`index.html`可能包含了自定义滚动条样式的HTML结构和对相关样式及脚本文件的链接。 `logo.gif`文件可能是网站的logo图像,用于展示品牌形象,通常位于页面的头部。而在`images`目录下,可能包含了...

    华丽滚动条滚动条Jquery

    4. **自定义滚动条样式**:浏览器默认的滚动条样式往往较为单一,但通过CSS和Jquery,我们可以定制滚动条的颜色、大小、形状,甚至鼠标滚动的速度和流畅度,使其更符合网页的整体风格。 5. **Jquery插件**:对于更...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    总的来说,通过理解和掌握这些 CSS3 的滚动条样式技巧,开发者能够实现滚动条不挤占内容区的布局,从而优化网页的用户体验。同时,结合提供的博客链接(https://blog.csdn.net/fukaiit/article/details/100069537)...

    多种风格的浏览器滚动条样式

    本篇文章将深入探讨“多种风格的浏览器滚动条样式”,并以“malihu-custom-scrollbar-plugin-master”这个压缩包文件中的内容为例,讲解如何自定义滚动条样式,让滚动条成为网站设计的一部分,提升用户体验。...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    在前端开发中,有时我们需要对浏览器的默认滚动条进行自定义,以提升用户体验或符合页面设计风格。Vue.js,作为一款流行的JavaScript框架,提供了多种方式来实现这一需求。本篇文章将详细探讨如何在Vue项目中自定义...

    自定义滚动条的样式

    `malihu-custom-scrollbar-plugin-master` 是一个专门用于自定义滚动条样式的插件,它提供了丰富的定制选项,使得滚动条可以更好地融入到网站的设计风格中。 首先,让我们了解滚动条的基本构成。滚动条通常由两个...

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

    在网页设计中,当页面内容超出了可视区域的宽度时,浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而,滚动条本身会占用一定的空间,这可能会导致页面宽度缩小,从而影响布局的整体美观性。为了不...

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

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

    自定义滚动条(兼容所有浏览器)

    然而,浏览器默认的滚动条样式往往无法满足设计师对于界面美观和统一性的追求。标题“自定义滚动条(兼容所有浏览器)”所提及的知识点,就是如何通过CSS和JavaScript技术来定制滚动条的外观和行为,同时确保其在...

Global site tag (gtag.js) - Google Analytics