Manuelles scrollen deaktivieren HTML?

Ich habe ein iframe erstellt. Mein Problem ist, das es manuell gescrollt werden kann. Es soll mit Javascript gescrollt werden können, aber nicht durch ziehen des Fingers/bewegen des Mausrads.

Wie geht das?

LG Bohne47

Answer 1

[medmonk]

Erstelle dir in JavaScript eine Funktion, die dem <iframe> ein overflow: hidden zuweist. Verwende dafür u.a. contentDocument sowie contentWindow und lege jeweils einen EventListener für deine Buttons an.

const disableScrolling = (iFrameID) => {
  let iframe = document.querySelector(iFrameID),
   iframeDoc = iframe.contentDocument || iframe.contentWindow.document,
      btnUp  = document.querySelector('.btn-up'),
      btnDown = document.querySelector('.btn-down');

  iframeDoc.body.style.overflow = 'hidden';
  
  btnUp.addEventListener('click', function() {
   iframeDoc.documentElement.scrollTop -= 50;
  });
  btnDown.addEventListener('click', function() {
    iframeDoc.documentElement.scrollTop += 50;
  });
}

Wenn ich es jetzt richtig auf dem Schirm habe, sollte eigentlich das gesetze overflow: hidden schon verhindern, das sich der Inhalt scrollen lässt. Dieser wird ja "abgeschnitten" und nur durch das verschieben mittels Button sichtbar wird.

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Comments

[Bohne47]

Also, ich habe per CSS dem iframe schon overflow:hidden zugewiesen, aber es geht immernoch nicht.

Habe Mal was mit scrolling="no" als HTML-Attribut gelesen. Gibt es das noch?

[medmonk]

@Bohne47

Du kannst mit CSS aber nicht auf den iFrame-Inhalt zugreifen und sich das overflow: hidden lediglich auf das <iframe> bezieht. Meine Idee war es daher, mithilfe von JavaScript das innenliegende Dokument zu "manipulieren."

Ich bin gerade etwas kurz angebunden, daher nicht testen konnte. Wenn ich gleich wieder zurück bin, schaue ich gerne nochmal drüber. Es gab mal das Attribut scrolling, das ist aber obsolet. Sprich nicht mehr Teil des HTML5 Standards.

[medmonk]

@medmonk

Ich habe jetzt nochmal nachgeschaut und es so auch nicht funktioniert (funktionieren wird), weil du aus Sicherheitsgründen keinen Zugriff darauf hast. Es wäre vielleicht ganz gut zu wissen, was du übers <iframe> einbinden möchtst.

Wenn der <iframe> Inhalt auch von dir stammt, gäbe es ja noch andere Lösungsansätze, wo diese Problematik gar nicht besteht. So wie oben beschrieben, erhälst du jedenfalls "nur" ein "Permission denied" zurück.