css實現滾動並隱藏滾動條

2021-10-03 06:21:05 字數 804 閱讀 3670

在做網頁前端頁面時,有些場景需要實現滾動的效果,但是由於滾動條的出現,造成頁面效果有些突兀,不美觀。

這時候就需要乙個既能滾動並能隱藏滾動條的效果了。

1、簡單來說 需要3個盒子

2、最外層的盒子與最裡面的盒子要設定寬高

3、最外層的盒子需要設定相對定位 relative 溢位隱藏overflow: hidden;

4、最裡層盒子需要絕對定位 設定overflow-y: scroll;

測試了一下,ie 火狐都可以用

以下全部**

1、最靈繁的人也看不見自己的背脊。——非洲

2、最困難的事情就是認識自己。——希臘

3、有勇氣承擔命運這才是英雄好漢。——黑塞

4、與肝膽人共事,無字句處讀書。——***

5、閱讀使人充實,會談使人敏捷,寫作使人精確。——培根

6、最大的驕傲於最大的自卑都表示心靈的最軟弱無力。——斯賓諾莎

7、自知之明是最難得的知識。——西班牙

8、勇氣通往天堂,怯懦通往地獄。——塞內加

9、有時候讀書是一種巧妙地避開思考的方法。——赫爾普斯

10、閱讀一切好書如同和過去最傑出的人談話。——笛卡兒

11、越是沒有本領的就越加自命不凡。——鄧拓

12、越是無能的人,越喜歡挑剔別人的錯兒。——愛爾蘭

13、知人者智,自知者明。勝人者有力,自勝者強。——老子

14、意志堅強的人能把世界放在手中像泥塊一樣任意揉捏。——歌德

15、最具挑戰性的挑戰莫過於提公升自我。——麥可·f·斯特利

隱藏滾動條css3實現滾動同時隱藏滾動條

專案場景需求要在區域性實現滾動,但是滾動出現了滾動條,一瞬間感覺整個頁面都不好了,經過努力css成功實現滾動同時隱藏滾動條,廢話不多說,直接上 隱藏滾動條title ulli ulul webkit scrollbar style head 測試隱藏滾動條li 測試隱藏滾動條li 測試隱藏滾動條li...

CSS 隱藏滾動條

hello無論如何我都想 hello無論如何我都想 hello無論如何我都想要 hello無論如何我都想 hello無論如何我都想要對 hello無論如何我都想 hello無論如何我都想要對你 hello無論如何我都想要對你 hello無論如何我都想 hello無論如何我都想要對你 hello無論如...

CSS隱藏滾動條

移動端瀏覽器將頁面的滾動條自動隱藏,同時又保證頁面可以滾動,使用者可以手動上下翻。pc端瀏覽器不會將頁面的滾動條自動隱藏,在出現橫向滾動條時候有可能會覆蓋內容,直接隱藏橫向滾動條會導致無法橫向滾動。如何做到既隱藏滾動條,又可以橫向滾動?設想是不是可以隱藏了滾動條的大部分,留下一小部分,用來滾動檢視內...