Hallo Leute,
in meiner Seite wird ein iFrame geladen in dem vom User ein HTML-Code geladen wird (deshalb iFrame).
Im großen und ganzen klappt was ich haben möchte bereits, ich habe einen bidirektionalen Kommunikations-weg damit sich die Seite dynamisch anpassen kann.
Was mir fehlt ist das scroll event vom iFrame auf die Hauptseite zu übertragen.
Die Höhe des iFrames richtet sich nach dem Inhalt, d.h. es kann z.B. 2000px hoch sein, befindet sich die Maus über dem iFrame und man scrollt, wird nur das scroll-event im iFrame ausgelöst aber nicht auf der Seite die das iFrame einbettet.
js im iFrame:
js Webseite:
Dieser Code funktioniert, die Darstellung ist leider sehr holprig bzw. wenn man das Mausrad schnell durchgehend dreht, führt es zu Problemen.
Gibt es nicht die Möglichkeit die Browserintern Scroll-Funktion anzusteuern?
Oder welche Lösung wäre schöner um ein schönes und sauberes Scrollen zu erhalten?
MfG: Paykoman
::EDIT::
Habe gerade gemerkt dass das Problem nur auftritt wenn man niceScroll einsetzt, ohne niceScroll sieht die Welt besser aus *g
in meiner Seite wird ein iFrame geladen in dem vom User ein HTML-Code geladen wird (deshalb iFrame).
Im großen und ganzen klappt was ich haben möchte bereits, ich habe einen bidirektionalen Kommunikations-weg damit sich die Seite dynamisch anpassen kann.
Was mir fehlt ist das scroll event vom iFrame auf die Hauptseite zu übertragen.
Die Höhe des iFrames richtet sich nach dem Inhalt, d.h. es kann z.B. 2000px hoch sein, befindet sich die Maus über dem iFrame und man scrollt, wird nur das scroll-event im iFrame ausgelöst aber nicht auf der Seite die das iFrame einbettet.
js im iFrame:
Code:
// scrollHandler to emit scroll event to mainpage function scrollHandler(event){ var e = window.event || event; // hier übergebe ich nur die richtung + (hoch) oder - (runter) mainPage.postMessage({cmd: "scroll", scroll: Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))}, mainOrigin); // nachfolgend war ein Test ob ich das ganze Event übertragen kann (klappte nicht) // mainPage.postMessage({cmd: "scroll", scroll: JSON.stringify(e)}, mainOrigin); } if( window.addEventListener ){ window.addEventListener("mousewheel", scrollHandler, false); // IE9+, Chrome, Safari, Opera window.addEventListener("DOMMouseScroll", scrollHandler, false); // Firefox }else{ window.attachEvent("onmousewheel", scrollHandler); // IE 6/7/8 }
Code:
// wir erhalten 2 verschiedene messages, die hier empfangen werden window.addEventListener('message', function(event){ if (~event.origin.indexOf("https://illex-media.com")){ switch( event.data.cmd ){ case 'setSize': descFrameEl.height = event.data.height+'px'; $('#content2').unblock();//.attr('style', ''); break; case 'scroll': scrollOnDesc(event.data.scroll); break; } }else{ // The data hasn´t been sent from your site! Be careful! Do not use it. return; } }); function scrollOnDesc(direction){ var scrollSize = ( direction < 0 ) ? 150 : -150, scrollPos = $(window).scrollTop(); $('html').stop().animate({scrollTop: scrollPos+scrollSize+'px'}, 300); }
Gibt es nicht die Möglichkeit die Browserintern Scroll-Funktion anzusteuern?
Oder welche Lösung wäre schöner um ein schönes und sauberes Scrollen zu erhalten?
MfG: Paykoman
::EDIT::
Habe gerade gemerkt dass das Problem nur auftritt wenn man niceScroll einsetzt, ohne niceScroll sieht die Welt besser aus *g
Kommentar