CSS/HTML滚动文本不带滚动条

Question

大家好！

我需要像图片上一样制作特效。我可以使用文字阴影（在文字上方和下方添加透明图像），但我不知道如何制作没有滚动条和剪切（overflow：hidden）的可滚动文本。有什么思路吗？

我只有一个想法-在滚动条上添加图像，以使其对用户隐藏。

- VeroLom

---

没有滚动条，用户该如何查看页面下方的文本内容？ - Matt Ball

你为什么想要做这件事？ - Jamie Dixon

Matt，用户应该通过鼠标滚轮来滚动文本。 - VeroLom

@VeroLom 如果他们没有滚轮怎么办？ - Dexter

滚动条除了主要功能外还有一个目的——它提供了一个视觉提示，表明有文本需要滚动查看。如果没有滚动条，许多人可能会完全错过下方的文本，所以不要感到惊讶。 - Andreas Eriksson

Answer 1

试一下这个：

<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>

- checkenginelight

---

只有当您知道滚动条的宽度不会超过17像素时，此方法才有效。根据操作系统/应用程序设置，滚动条可能会更宽。 - rossisdead

@checkenginelight：在Chrome/Safari中尝试您的演示文稿：选择一行并将鼠标向右拖动，您将看到滚动条。或者使用文本区域代替内部元素，然后填写一些文本。然后使用键盘上的“Page Up”和“Page Down”键。 - Mori