html - Create a frame for content without images/bg

Question

I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.

Here is what the page looks like now:

I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.

Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?

Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.

Answer 1

如果您的目标只是隐藏滚动条（并假设您对 jQuery 没问题），我建议您使用slimScroll 之类的东西。

引擎盖下发生的事情很简单：指定的容器分配有overflow: hidden;，并附加了悬停处理程序 - 唯一目的是模拟自定义滚动条以响应鼠标悬停事件。

Answer 2

尝试探索jScrollPane功能。它是用于处理滚动条的强大灵活的 JQuery 插件，您可能会找到它的解决方案。