英文:
Combine overflow "auto" and "visible" (overflowing content to be visible)
问题
当元素使用选项 overflow: auto 时，溢出的内容被隐藏。
选项 overflow: visible 保持内容可见。
是否有一种选项可以同时实现滚动和溢出内容可见？
这里有一些代码，我在一个沙盒中展示了两种可能性：https://codepen.io/SimonSimCity/pen/YzRjjvm
英文:
When having an element with the option overflow: auto, the overflowing content is hidden.
The option overflow: visible keeps the content visible.
Is there an option to have both combined, to have the content scrolling, but overflowing?
Here's some code where I have a sandbox where I show both possibilities: https://codepen.io/SimonSimCity/pen/YzRjjvm
答案1
得分: 1
没有原生设置可见滚动溢出的选项。您需要自己构建一个。
思路是创建一个容器，该容器跨越整个页面的宽度（或者您希望可见区域的宽度），然后使用一些技巧，使内容仅跨越您希望的部分。
一种方法是使用内边距：
https://codepen.io/errnesto/pen/PoxByQx
（在外部容器上使用了position: absolute，这里我采用了一些捷径。）
还有其他实现此效果的方法。如果您不喜欢滚动条跨越整个页面，您可以监听wheel事件并使用JavaScript移动内容。尽管我总是更喜欢不自己实现滚动。
英文:
There is no native setting for a visible scoll overflow. You would have to build one yourself.
The idea is to have a container that spans the full width of the page (or whatever the visible area should be) and then use some tricks to make the content only span the part you want it to be.
One way is to use padding:
https://codepen.io/errnesto/pen/PoxByQx
(I took some shortcuts here by using position: absolute on the outer container.)
There are also other ways to achieve this effect. If you don't like the scroll bar spanning the full page you could listen to the wheel event and move the content with js. Although I would always prefer not to implement scolling by yourself.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论