为 iFrame 创建浮动水平滚动条答案

【问题标题】：Create a floating horizontal scroll bar for an iFrame为 iFrame 创建浮动水平滚动条
【发布时间】：2016-01-07 06:36:08
【问题描述】：

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

我想要的是在链接到主滚动条的可见窗口底部显示一个滚动条，如果用户向下滚动到足以看到主滚动条，它会消失，这将是一个奖励吧。

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

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

另一个选项是用鼠标滚轮控制滚动，参见示例https://jsfiddle.net/DIRTY_SMITH/5gs8pojm/

(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);
}
})();

【讨论】：

您能否详细说明其工作原理？我不确定我是否完全理解，但在我看来，这会覆盖正常的鼠标滚动功能（垂直）并将其更改为水平。虽然这可以满足我的目的（我需要与其他人核实），但它似乎也可能带来其他问题，例如无法垂直滚动。
@ArakTai'Roth 我在 fiddle 中构建了一个 fiddle 来向您展示它是如何工作的，右侧的滚动条将手动移动，底部将使用滚轮，（反转滚动） .蓝色背景区域为测试区域jsfiddle.net/DIRTY_SMITH/5gs8pojm/6
只有在水平滚动条出现时才可以激活它吗？
是的，您需要使用更多的 Javascript 才能做到这一点。我可以稍后再写