如何隱藏瀏覽器滾動條

在網頁設計中,扁平化模式已經走向前端。然而,扁平化多內容容易導致瀏覽器橫屏溢出,影響用戶體驗也不利於優化,隱藏滾動條是必須的技能。本篇經驗分享如何隱藏網頁自滾動條與引入模塊的滾動條如何隱藏。

工具/原料

電腦,瀏覽器
Dreamweaver,文本文件

方法/步驟

第一步:新建一個html文件

用dw或記事本軟體新建一個html網頁文件,命名為隱藏滾動條,保存在桌面;

為了方便查看滾動條,需要設置網頁尺寸超過電腦螢幕大小;

在瀏覽器中打開網頁,查看效果,如圖:

第二步:<body>內隱藏滾動

在<body>標籤中寫入以下代碼,隱藏橫向滾動條;

overflow-x:hidden;

在<body>標籤中寫入以下代碼,隱藏縱向滾動條;

overflow-y:hidden;

在瀏覽器中查看效果,如圖:

第三步:設置html半文本隱藏

刪除body樣式;

在樣式中插入以下代碼;

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

隱藏橫向滾動條;

在樣式中插入以下代碼;

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

隱藏縱向滾動條;如圖:

第四步:設置html全文本隱藏

在樣式中插入以下代碼;

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

隱藏全部滾動條。如圖:

第五步:<iframe>引用外部網頁文件

在html中插入以下代碼,引入一個框架,裡面只外部代碼;

<iframe src="隱藏滾動.html" style="width:600px; height:800px;"></iframe>

在瀏覽器中查看滾動條動態,如圖:

第六步:隱藏<iframe>框架滾動條

在<iframe>內部作以下修改,隱藏滾動條;

<iframe src="隱藏滾動.html" style="width:600px; height:800px;" scrolling="no"></iframe>

如圖:

第七步:高級隱藏<iframe>

網頁頭部引入jquery主文件,並鍵入以下代碼;

<script>

$(function(){

$("#iframe_id").load(function(){

var height = $(this).contents().find("#content").height() + 90;

//這樣給以一個最小高度

$(this).height( height < 900 ? 800 : height );

});

});

</script>

即可隱藏滾動條,如圖:

注意事項

橫向滾動條經常都是隱藏的,縱向可隨網頁高度滾動。
w3c標準是隱藏滾動條的。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場