2011-09-22 78 views
3

all!不帶滾動條的CSS/HTML滾動文本

我需要在圖片上製作效果。我可以使文本陰影(文本頂部和底部的透明模糊),但我不知道如何使滾動文本沒有滾動條和裁剪(溢出:隱藏)。有創意嗎? enter image description here

我只有一個想法 - 添加圖像在滾動條來從用戶隱藏

+4

不使用滾動條,怎麼應該看到這就是下面的文本用戶摺疊? –

+1

爲什麼你會想要這樣做? –

+0

馬特,用戶應該通過鼠標滾動來滾動文本。 – VeroLom

回答

6

嘗試了這一點:

<div id="container" style="width: 183px; height: 183px; overflow: 
hidden; border: solid black 1px"> 
<div id="floating-div" style="width: 200px; height:200px; overflow: 
auto"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div> 
</div> 
+0

非常感謝!這就是我需要的) – VeroLom

+1

這隻有在你知道滾動條寬度爲17px或更小時纔有效。根據操作系統/應用程序設置,滾動條可能更寬。 – rossisdead

+0

@checkenginelight:在Chrome/Safari中試用您的演示:突出顯示/選擇一條線並將鼠標拖至右側,您將看到滾動條。或者使用textarea而不是內部元素,然後用一些文本填充它。然後使用鍵盤鍵「Page Up」和「Page Down」。 – Mori