为iFrame创建浮动水平滚动条

时间:2016-01-06 22:05:52

标签: javascript jquery html css iframe

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

我想要的是滚动条在链接到主滚动条的可见窗口的底部可见,如果用户向下滚动足以看到主滚动条,它会消失杆

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

1 个答案:

答案 0 :(得分:0)

您拥有的另一个选项是使用鼠标滚轮控制滚动,请参阅示例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);
}
})();