jQuery: Eigene Selectbox => Seite soll nicht scrollen

[k3nguruh]

Hallo,

Ich habe mir ein Selectbox Plugin programmiert. Es funktioniert auch soweit (fast) alles wie gewollt.

Mein Problem besteht darin, dass Verhalten der Seite zu steuern, wenn das Selectbox-Dropdown geöffnet ist. Nimmt man das Standard Select, kann man bei geöffneten Dropdown die Seite nicht scrollen. So soll es bei mir auch sein. Ich habe da auch etwas zusammengebaut, aber wenn man mit der Maus scrollt, "Zuckt" die Seite kurz, bleibt aber wie gewollt an der Stelle stehen. Aber vll gibt es ja eine andere / bessere Möglichkeit.

Hier mal der Code (nur das wichtigste zusammengestellt):

$(function () {
 
  const $window = $(window);
  const $wrapper = $("#selectbox");
  const $toggle = $("#selectbox--toggle");
  const $dropdown = $("#selectbox--dropdown");

  let fixedScrollY;

  //
  // Events
  // -------------
  $window.on({ click: _outside, scroll: _fixed });
  $toggle.on({ click: _toggle });

  //
  // Functions
  // -------------

  // Y-Position der Seite merken
  // Dropdown ausblenden oder anzeigen
  function _toggle() {
    fixedScrollY = $window.scrollTop();
    $dropdown[$dropdown.is(":visible") ? "hide" : "show"]();
  }

  // Bei Klick ausserhalb der Selectbox, das Dropdown schliessen
  function _outside() {
    if ($dropdown.is(":visible")) {
      if (!$(event.target).closest($wrapper).length) {
        $dropdown.hide();
      }
    }
  }

  // Bei geöffneten Dropdown das scrollen der Seite verhindern
  function _fixed() {
    if ($dropdown.is(":visible")) {
      $window.scrollTop(fixedScrollY);
    }
  }

});

Sollt noch der HTML bzw. CSS - Code benötigt werden, kann ich den auch posten. Aber ich glaube das sollte reichen.

Vielen Dank fürs lesen und helfen....

 

[Sempervivum]

Nimmt man das Standard Select, kann man bei geöffneten Dropdown die Seite nicht scrollen.

Bei mir klappt das Standardselect sofort zu wenn ich den Scrollbalken oder die mittlere Maustaste benutze um zu scrollen. Von daher verstehe ich nicht was Du meinst. Oder bezieht sich das auf das Verhalten auf einem Mobilgerät?

 

[k3nguruh]

Hallo,

ich hatte es vorher nur mit dem Firefox getestet... Anscheinen verhalten sich die Desktop Browser da unterschiedlich.

Also, bei geöffneter Selectbox (Standard HTML) - Mausscrollen daneben:

Firefox: Selectbox bleibt geöffnet, Seite lässt sich nicht scrollen.
Edge: Selectbox schliesst, Seite lässt sich scrollen.
Chrome: k.a

Dann werde ich das Dropdown beim Scrollen ausserhalb einfach schliessen.

Falls denoch einer eine Idee hat, warum das Dropdown bei meinem Code beim Scrollen kurz "Zuck", wäre ich natürlich auch dankbar.

 

[Sempervivum]

Falls denoch einer eine Idee hat, warum das Dropdown bei meinem Code beim Scrollen kurz "Zuck", wäre ich natürlich auch dankbar.

Ich denke, wenn das Scroll-Event feuert hat der Browser schon ein ganz klein wenig gescrollt und dein Javascript scrollt dann an die ursprüngliche Position zurück. Eine Lösung fällt mir nicht ein.
Ich hatte event.preventDefault() versucht, sowohl für window als auch für document aber ohne Erfolg.

 

[k3nguruh]

Hallo,

Das hatte ich auch versucht. Aber danke für dein bemühen.

Eine Idee ist mir gerade noch gekommen. Kann es aber erst heute abend testen. Und zwar über ein Maus Event. Befindet sich die Maus daneben, mouseleave oder so was in der Art abfangen.
Ansonsten, Wie schon geschrieben, einfach schließen und gut ist.