欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iframe无滚动条,内容可滚动

程序员文章站 2022-04-18 18:37:33
...

不跨域情况下给iframe加载的document添加mousewheel事件,自己设置document.body/document.documentElement的scrollTop进行滚动

跨域没搞。。只能设置scrolling="auto"或者yes

<iframe scrolling="no" style="width:100%;height:300px;border:solid 1px #000" src="x.html" onload="bindMouseWhee(this)"></iframe>
<script>
    var  firefox = navigator.userAgent.indexOf('Firefox') != -1;
    function MouseWheel(e,doc) {
        e.preventDefault && e.preventDefault(), e.returnValue = false;
        var up = firefox && e.detail < 0 || e.wheelDelta > 0;

        doc.body.scrollTop = doc.documentElement.scrollTop += up ? -50 : 50;//每次滚动50px
    }
    function bindMouseWhee(ifr) {
        try {
            var  doc = ifr.contentWindow.document;
            firefox ? doc.addEventListener('DOMMouseScroll', function (e) { MouseWheel(e,doc)}, false) : (doc.onmousewheel = function (e) {MouseWheel(e||ifr.contentWindow.event,doc) });
        }
        catch (e) { alert('跨域无法获取iframe加载document'+e)}
    }
</script>

 

相关标签: 前端 js