Javascript 为iFrame创建浮动水平滚动条

Javascript 为iFrame创建浮动水平滚动条,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我有一个iFrame。如果由于视力不好,用户放大或使用高放大率,我希望显示一个水平滚动条,以便用户可以在iFrame内从左向右滚动。这一部分很简单,不是问题。我发现的问题是,滚动条出现在iFrame的底部,如果放大到足够需要它,则需要用户向下滚动远离实际内容才能使用它,这对用户来说并不友好 我想要的是,在链接到主滚动条的可见窗口的底部可以看到滚动条,如果用户向下滚动到可以看到主滚动条,滚动条消失将是一个额外的好处 我应该重申,这是在一个iFrame中,内容是跨域的。我可以在iFrame中编辑内容

我有一个iFrame。如果由于视力不好,用户放大或使用高放大率,我希望显示一个水平滚动条,以便用户可以在iFrame内从左向右滚动。这一部分很简单,不是问题。我发现的问题是,滚动条出现在iFrame的底部,如果放大到足够需要它,则需要用户向下滚动远离实际内容才能使用它,这对用户来说并不友好

我想要的是,在链接到主滚动条的可见窗口的底部可以看到滚动条,如果用户向下滚动到可以看到主滚动条,滚动条消失将是一个额外的好处


我应该重申,这是在一个iFrame中,内容是跨域的。我可以在iFrame中编辑内容,但这将是一项相当大的任务,而编辑主窗口相对简单,因此,如果所有需要的工作都可以在其中完成,那就太好了。

另一个选项是用鼠标滚轮控制滚动,请参见示例


你能详细说明一下这是如何工作的吗?我不确定我是否完全理解,但在我看来,这会覆盖正常的鼠标滚动功能(垂直)并将其更改为水平。虽然这对我来说是可行的(我需要和其他人核实一下),但似乎它也会带来其他问题,例如无法垂直滚动。@ArakTai'Roth我在小提琴内部制作了一个小提琴,向您展示它的工作原理,右侧的滚动条将手动移动,底部将使用滚轮(翻转滚轮). 蓝色背景区域是测试区域,是否只有在水平滚动条出现时才激活它?是的,您需要使用更多的Javascript来完成。我可以晚一点写
(function() {
function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
    document.body.scrollLeft -= (delta*40); // Multiplied by 40
    e.preventDefault();
}
if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);
}
})();