首頁 web前端 html教學 HTML中的滾動條和去掉滾動條問題分析

HTML中的滾動條和去掉滾動條問題分析

Mar 06, 2017 pm 05:25 PM

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),所以无法使用该填充过的屏幕区域。 

 

去掉水平滚动条: 
 
去掉竖直滚动条: 
 

隐藏横向滚动条,显示纵向滚动条: 
 

全部隐藏 
 

或者是 
 

这里先说一下滚动条的属性代码: 
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{}中的

更多HTML中的滚动条和去掉滚动条问题分析相关文章请关注PHP中文网!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

See all articles