javascript iframe 上的 Jquery 自定义滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6688768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery custom scroll bar on an iframe
提问by user772575
I'm looking for a solid cross-browser Jquery custom scroll bar plugin that plays nice with iframes. Does anyone have a nice plugin and a solution?
我正在寻找一个可靠的跨浏览器 Jquery 自定义滚动条插件，它可以很好地与 iframe 配合使用。有没有人有一个很好的插件和解决方案？
回答by Mike Figueroa
Depends greatly on the context:
很大程度上取决于上下文：
- Do you want to create an iframe with styled scrollbars that other people can place on their site?
- Or are you trying to style someone else's content which is placed on your site via iframe?
- 您想创建一个带有样式滚动条的 iframe，其他人可以将其放置在他们的网站上吗？
- 或者您是否正在尝试设计通过 iframe 放置在您网站上的其他人的内容？
If you have control over the content of the iframe, then it's an easy thing to do. I've used http://livepipe.net/with success.
如果您可以控制 iframe 的内容，那么这很容易做到。我已经成功地使用了http://livepipe.net/。
Custom scrollbars typically work by placing content in a , then moving that element relative to a parent div by javascript.
自定义滚动条通常通过将内容放置在 中，然后通过 javascript 相对于父 div 移动该元素。
EDIT 1:
编辑 1：
This is the detail page. Just start editing the values. http://livepipe.net/control/scrollbar
这是详细页面。只需开始编辑值。http://livepipe.net/control/scrollbar
You'll know you have it right when loading your page notin an iframe, the fancy scrollbars are 100% the height of your browser viewport no matter the height.
当您加载页面而不是在 iframe 中时，您就会知道它是正确的，无论高度如何，花哨的滚动条都是浏览器视口高度的 100%。
It might also be worth adding a function to recalculate the height of the objects & the positioning of the bottom control on window resize. Although, that's easier to do with jQuery than in PrototypeJS.
添加一个函数来重新计算对象的高度和窗口调整大小时底部控件的定位也可能是值得的。尽管如此，使用 jQuery 比使用 PrototypeJS 更容易做到这一点。
EDIT 2:Here's a working example I cooked up: http://pastebin.com/gvtnLANQ
编辑 2：这是我编写的一个工作示例：http: //pastebin.com/gvtnLANQ
回答by Eric Hodonsky
Try this really cool plugin. It helps eliminate the need for a scroll bar: https://github.com/Ashwell/jquery-scrollThis
试试这个非常酷的插件。它有助于消除对滚动条的需要：https: //github.com/Ashwell/jquery-scrollThis
