`
天空之城
  • 浏览: 404529 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于HTML中的滚动条/去掉滚动条

    博客分类:
  • Java
 
阅读更多

1.xhtml下滚动条的颜色问题

在原来的html的时候,我们可以这样定义整个页面的滚动条:

body{
 scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
  scrollbar-highlight-color:#fff; /*- 左二 -*/
  scrollbar-face-color:#E4E4E4; /*- 面子 -*/
  scrollbar-arrow-color:#666; /*- 箭头 -*/
  scrollbar-shadow-color:#808080; /*- 右二 -*/
  scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
  scrollbar-base-color:#D7DCE0; /*- 基色 -*/
  scrollbar-track-color:#;/*- 滑道 -*/
}

但是同样的代码,我们应用在 xhtml下就不起作用了,我相信好多好朋友也遇到过同样的问题。

那么怎么才能在xhtml下应用滚动条样式呢?看下列代码:

html{
 scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
  scrollbar-highlight-color:#fff; /*- 左二 -*/
  scrollbar-face-color:#E4E4E4; /*- 面子 -*/
  scrollbar-arrow-color:#666; /*- 箭头 -*/
  scrollbar-shadow-color:#808080; /*- 右二 -*/
  scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
  scrollbar-base-color:#D7DCE0; /*- 基色 -*/
  scrollbar-track-color:#;/*- 滑道 -*/
}

这段代码和上一段唯一的不同就是在css定义的元素上,一个是body一个是html。我们再测试一下,把html页面的“body”修改成“html”测试一下,发现依然可以实现效果。那到底是为什么呢?

我们来看一下下面的图:

这就是html最基本的dom树结构。

我们再看看html和xhtml的定义:
 
HTML (Hyper Text Markup Language,超文件标记语言),超文件标记语言广泛应用于国际互联网上.HTML描述了文本基准如何进行呈现,以及超级连接如何连接到另外的页面。

XHTML (Extensible Hypertext Markup Language,可扩展的超文件标记语言),是一种标记语言,表现方式与 HTML类似, 不过语法上更加严格。从继承关系上讲,HTML是一种基于SGML的应用,非常灵活,而XHTML则基于XML,XML是SGML的一个子集。XHTML 1.0 在2000年1月26日成为 W3C 的推荐标准。

从字面上来看,xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面?其实最根本的原因就是要让html更加结构化标准化(因为html实在是太烂)。

OK,我们回来看上面的结构树,我们在html里面定义的是body,因为html不是很标准所以这样可以生效,而在xhtml里面这样就不行了, 我看看那个图很明显,body标签本身不是根元素,只有html才是根元素,而页面的滚动条也是属于根元素的,所以这就是我们为什么定义body没有效果 的原因,因为我们定义的只是一个子原素。OK,我们知道了原理,来做一个试验如果把定义“body”或“xhtml”换成“*”:

*{
 scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
  scrollbar-highlight-color:#fff; /*- 左二 -*/
  scrollbar-face-color:#E4E4E4; /*- 面子 -*/
  scrollbar-arrow-color:#666; /*- 箭头 -*/
  scrollbar-shadow-color:#808080; /*- 右二 -*/
  scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
  scrollbar-base-color:#D7DCE0; /*- 基色 -*/
  scrollbar-track-color:#;/*- 滑道 -*/
}

在html和xhtml都通过,因为*就是定义页面上的任何标签当然也包括了“html”这个标签。

(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别,但是如果你把页面的XHTML 1.0 transitional doctype去掉的话,那么这个页面就没有doctype,默认的显示方式就是html4.01,不过你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的,虽然这个页面的标准是html 4.01)

2、xhtml下frame页面横向滚动条的问题

在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷。

对于这个bug一般有3种解决方案,

方法1:

代码:

html { overflow-y: scroll; }

原理:强制显示ie的垂直滚动条,而忽略水平滚动条。
优点:完全解决了这个问题, 允许你保持完整的XHTML doctype 。
缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。

方法2:

代码:

html { overflow-x: hidden; overflow-y: auto; }

原理:隐藏横向滚动,垂直滚动根据内容自适应。
优点:在视觉上解决了这个问题。在不必要的时候,未强制垂直滚动条出现。
缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,屏幕以外的内容会因为用户无法水平滚动,而看不到。

方法3:

代码:

body { margin-right: -15px; margin-bottom: -15px; }

原理:这会在margin的水平和垂直方向上添加一个负值,IE添加了该精确数值后,便会去除对滚动条的需求假象。
优点:在视觉上解决了这个问题,垂直滚动根据内容自适应。
缺点:由于“人为创建”了15px的外边距(margin),所以无法使用该填充过的屏幕区域。

<body scroll=no>

去掉水平滚动条:
<body style="overflow-x: hidden">
去掉竖直滚动条:
<body style="overflow-y: hidden">

隐藏横向滚动条,显示纵向滚动条:
<body style="overflow-x:hidden;overflow-y:scroll">

全部隐藏
<body style="overflow:hidden">

或者是
<body scroll="no">

这里先说一下滚动条的属性代码:
overflow-y : visible | auto | hidden | scroll
visible :  不剪切内容也不添加滚动条。
auto :  在需要时剪切内容并添加滚动条
hidden :  不显示超过对象高度的内容,这里不对这个属性作介绍,大家喜欢的话可以自己尝试
scroll :  总是显示纵向滚动条


首先我现说一下去掉滚动条的方法:
如果用百度风格模版的话,滚动条只可能有一个,那就是整个空间右边最大的浏览器窗口滚动条,也就是我美化过的那个滚动条,现在告诉大家,我们可以把这个滚动条去掉,但是却不影响浏览的方法:
在body
{}中加入overflow-y :
visible就可以了,这样滚动条就不会显示出来了。大家可能会问,这样怎么往下拉?呵呵,既然我说了不影响浏览,那当然是有方法的,浏览的方法就是用
鼠标的滚轮,虽然滚动条没了,可是鼠标滚轮还是能够让网页上下滚动的。我相信大家一般浏览网页的时候用滚轮下拉网页的次数应该比直接用鼠标拖动滚动条的次
数多吧?提示下,如果碰到没有滚动条而鼠标又没有滚轮的朋友,该怎么浏览网页呢?呵呵,大家可以用键盘上面的方向键上方的PageUp和PageDown
来上下翻页,也可以用空格往下拉网页和Shift+空格往上拉网页,还有一个方法就是用上下方向键来拉动,另外还有按Home键回到网页顶部,End键到
达网页底部,呵呵,是不是方法很多呢?不过这样总会有那么一些些的不方便,所以大家可以根据自己的空间和喜好来考虑要不要取消这个滚动条。

哈哈,想不到啰哩叭嗦地,一下说了这么多话

下面我们说添加滚动条的方法:
overflow-y : auto;height:多少px
auto
就是自动判断要不要加入滚动条,当设定的对象内容超过了height设定的高度时,就自动添加滚动条,不然则不显示,body{}中的默认值就是
overflow-y : auto;height:浏览器高度,所以当网页内容超过浏览器高度的时候,浏览器右边就会自动显现出滚动条来
大家如
果需要设置这个的话,本人建议设置在最新评论#m_comment{}、文章列表#m_blog{}等内容和高度都不固定的模版中,有的朋友找不到这些模
版的ID,可能只有例如#m_comment div.item{}或者#m_pro a{}等的ID,那么可以自己加上没有的ID,这样就可以设置了

这里还有另一个添加滚动条的方法:
overflow-y :scroll
这个参数的作用上面解释过了,不过如果只加这个参数的话,虽然滚动栏会显示,但是不会显示滚动条,所以必须还要加上一个
height:多少px
高度属性,跟上面的那个方法差不多,但是有根本的区别,这个无论对象内容的高度是否超过了height设定的高度,滚动栏永远都会显示在边上的

下面我们说一下关于滚动条的美化,这个我朋友给我看了网上的一个说明,我觉得上面的图很不错,但是很小,所以我放大了一倍,看起来就清楚多了,我们先说一下美化的各个属性:
SCROLLBAR-FACE-COLOR: 颜色代码;
SCROLLBAR-HIGHLIGHT-COLOR:颜色代码;
SCROLLBAR-SHADOW-COLOR: 颜色代码;
SCROLLBAR-3DLIGHT-COLOR: 颜色代码;
SCROLLBAR-ARROW-COLOR: 颜色代码;
SCROLLBAR-TRACK-COLOR: 颜色代码;
SCROLLBAR-DARKSHADOW-COLOR: 颜色代码;
大家是不是看到这么多属性有点点头大了?哈哈,放心,看一下我刚才提及的被我放大了一倍的图解你们就会感觉好多了:



里的图片上还有一个scrollbar-base-color的属性,其实这个属性是个上面7个属性的总合,怎么说呢?就是当你设定了这个属性的颜色后,
前面的7个属性都可以不用设置了,滚动条会自动帮你设定的,只是这个设定都会基于你设定的scrollbar-base-color的颜色而自动设定
这个属性的优点就是不用大家费尽心思的去研究各个地方的颜色,但是缺点就是不能够融和五颜六色于一体。。

注:设定了scrollbar-base-color就不要设定其他七个属性了,设定了其他七个属性就不要设定scrollbar-base-color,不然之间可能会有冲突,会有一些效果不起作用的

最后,还是考虑到大家可能会喜欢我的美化代码[真臭美~],我把我的美化代码贴出来:
SCROLLBAR-FACE-COLOR: #CCFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: white;
SCROLLBAR-SHADOW-COLOR: #813533;
SCROLLBAR-3DLIGHT-COLOR: #813533;
SCROLLBAR-ARROW-COLOR: #813533;
SCROLLBAR-TRACK-COLOR: white;
SCROLLBAR-DARKSHADOW-COLOR: #813533;
以上代码本人是加在body{}中的

分享到:
评论

相关推荐

    JS去除iframe滚动条的方法

    在文章中提供的JavaScript函数`removeScroll`,通过获取id为`myframe`的iframe元素,并将其`scrolling`属性设置为`no`,从而达到去除滚动条的目的。这一操作是通过`document.getElementById("myframe").scrolling=...

    关于HTML中的滚动条/去掉滚动条问题

    HTML中的滚动条样式控制主要涉及CSS(层叠样式表)技术。在早期的HTML中,可以通过为`body`标签设置特定的CSS样式来定制滚动条的外观,例如颜色、阴影等。然而,当涉及到XHTML时,由于其对语法的严格要求,这种样式...

    textarea自适应高度标签,去除难看的滚动条

    针对这些问题,我们可以采用特定的技术来实现 `textarea` 的高度自适应和去除滚动条。 首先,`textarea` 的高度自适应通常通过JavaScript库,如jQuery,来实现。jQuery 是一个强大的JavaScript库,它简化了DOM操作...

    去掉WebBrowser的边框和滚动条

    本篇文章将详细探讨如何通过编程手段去除WebBrowser控件的边框和滚动条,使它更加融入到应用程序的界面设计中。 首先,我们要理解WebBrowser控件的特性。它是.NET Framework提供的一种控件,用于在桌面应用中展示...

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

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

    HTML表格滚动条 两种形式

    本篇将深入探讨如何在HTML表格中实现两种形式的滚动条。 1. 垂直滚动条 在HTML中,可以通过设置`&lt;table&gt;`元素的CSS样式来添加垂直滚动条。首先,我们需要限制表格的宽度或高度,使得内容溢出,然后设置`overflow`...

    去掉网页中多余的滚动条

    ### 去掉网页中多余的滚动条 在网页设计与开发的过程中,经常会出现因为布局问题导致页面出现不必要的滚动条的情况。这些多余的滚动条不仅影响用户体验,还可能对页面整体美观造成影响。本文将针对如何去除网页中最...

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

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

    js 特效 html 特效 去掉页面的滚动条

    js 特效 html 特效 去掉页面的滚动条 js 特效 html 特效 去掉页面的滚动条

    解决ReportViewer的双竖滚动条的问题

    /* 把报表区域的滚动条去掉 */ viewer.remove_propertyChanged(viewerPropertyChanged); /* 撤销事件侦听 */ } } Sys.Application.add_load(function () { $find('&lt;%= reportViewer.ClientID %&gt;').add_...

    javascript经典特效---去掉页面的滚动条.rar

    因此,在设计时要考虑清楚是否真的需要去除滚动条,或者是否有其他更好的替代方案,比如使用自定义滚动条(CSS Scrollbars)来保持美观的同时,保证用户能够浏览全部内容。 总的来说,掌握如何使用JavaScript处理...

    完全搞定iframe(框架)里的滚动条.doc

    ### 完全搞定iframe(框架)里的滚动条 #### 知识点概览 ...通过对不同场景下iframe滚动条问题的理解以及采用合理的CSS或JavaScript技术,可以有效地解决在A页面中加载B页面时出现的滚动条问题,提升用户体验。

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

    本次我们将关注一个特定的技术点——如何在易语言中隐藏并禁止超文本浏览框(HyperText View)的滚动条。 在易语言中,超文本浏览框是一种可以显示HTML内容的控件,通常用于展示网页或者富文本信息。默认情况下,超...

    去浏览器滚动条代码

    尤其是在制作一些全屏背景、沉浸式体验或者演示文稿时,去除浏览器滚动条的需求尤为突出。本文将详细介绍如何通过CSS来实现这一功能,并探讨不同浏览器间的兼容性问题。 #### 二、核心代码解读 根据题目中的描述...

    让滚动条消失

    - **美学考量**:在一些对美观有极高要求的设计中(如艺术类网站),去除滚动条可以达到更简洁、一致的视觉风格。 #### 知识点三:实现滚动条隐藏的方法 根据给定的部分内容,我们可以使用CSS样式来控制滚动条的...

    textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

    本文将详细介绍如何在HTML和JavaScript中去除`textarea`的横向和纵向滚动条。 首先,我们可以使用CSS样式来控制`textarea`的滚动条显示。CSS的`overflow`属性是用来定义元素溢出其边框的内容如何显示。这个属性接受...

    MFC显示 web browser控件 去掉滚动条

    在web browser 控件中 实现事件 documentcomplete 当文档下载完毕时再显示出来,在此事件代码中去掉滚动条。在特定的场合,比如,我要在桌面软件中显示一个广告图片又不想滚动条的出现影响界面美观等 有兴趣可以...

    HTML 隐藏滚动条和去除滚动条的方法

    接下来,若要彻底去除滚动条,除了隐藏滚动条的CSS样式外,还可以通过直接在html标签中写入CSS代码来防止其他CSS样式文件中的设置覆盖掉当前的滚动条设置,如下: ```html &lt;style type="text/css"&gt; body { ...

Global site tag (gtag.js) - Google Analytics