✔ [JavaScript] scroll-Event ohne Rollleiste

[Parantatatam]

Hallo Tutorianer,

ich habe gerade einen aberwitzigen Gedanken. Und zwar möchte ich eine Lösung für folgendes Problem haben: stellt euch folgendes vor: es gibt ein Element auf einer Webseite über welches ich mit dem Mauszeiger fahren, und dort dann scrollen kann. Jedoch möchte ich, dass dort keine Rollleiste angezeigt wird. Bisher habe ich es so probiert:

<div style="width:300px;height:300px;overflow:hidden">
  <div style="width:350px;height:300px;overflow-y:scroll" id="scroller">
    <div style="width:300px;height:2500px"></div>
  </div>
</div>

var scroller = document.getElementById("scroller");
scroller.scrollTop = 1100;
scroller.onscroll = function (e) {
  console.log(this.scrollTop);
  this.scrollTop = 1100;
};

Problem ist nur, dass ich dabei entweder immer wieder zum Anfang des innersten Kastens springen muss, oder eben diesen immer weiter verlängern muss.

Gibt es da nicht eine bessere Lösung?

Nachtrag: Ich habe mein Skript jetzt so verändert, dass die Rollleiste sich stets mittig befindet und nach dem Scrollen wieder mittig positioniert wird. Somit wird quasi der Effekt erzielt, den ich mir wünsche, jedoch brauche ich weiterhin drei ineinander verschachtelte DIV-Boxen.

 

[Parantatatam]

Okay, ich habe nun selber eine Lösung für mein Problem gefunden. Es gibt ein Event, dass "mousewheel" heißt, und dessen Scrollwert man über "offsetX" und "offsetY" abfragen kann. Somit braucht man nicht diese umständliche, hässliche Variante.

 

[tombe]

Auch wenn du das Thema schon als erledigt markiert hast, hier trotzdem noch meine Lösung:

<script language="javascript" type="text/javascript">
$(document).ready(function() {

$("#div1").bind("mousewheel", function(event, delta) {
	pos = parseInt($("#div2").css("top"));
	diff = parseInt($("#div2").css("height")) - parseInt($("#div1").css("height"));

	if (delta > 0 && pos < 0) {					    // DOWN
        $("#div2").css("top", parseInt($("#div2").css("top")) + Math.abs(delta));
    } else if (delta < 0 && (pos + diff) > 0) {     // UP
        $("#div2").css("top", parseInt($("#div2").css("top")) - Math.abs(delta));
    }
    return false;
});

});
</script>

<div id="div1" style="position: relative; left: 0px; top: 0px; width: 300px; height: 200px; border: solid 2px; padding: 5px; overflow: hidden;">
	<div id="div2" style="position: relative; top: 0px; left: 0px;">
		ANFANG<br />
		bla bla bla<br />bla bla bla<br />bla bla bla<br />
		<b>--------------</b><br />
		bla bla bla<br />bla bla bla<br />bla bla bla<br />
		<b>MITTE</b>
		bla bla bla<br />bla bla bla<br />bla bla bla<br />
		<b>--------------</b><br />
		bla bla bla<br />bla bla bla<br />bla bla bla<br />
		<b>--------------</b><br />
		bla bla bla<br />bla bla bla<br />bla bla bla<br />
		ENDE
	</div>
</div>

Damit es funktioniert, muss allerdings folgende jQuery-Erweiterung vorhanden sein.

Für alle die so etwas auch mal suchen, könntest du deine Lösung ja auch noch zeigen!

 

[Parantatatam]

Also letztendlich habe ich schon beschrieben, was mein Ergebnis war: man muss einfach einen Event-Handler auf das Ereignis "mousewheel" oder "DOMMouseWheel" setzen und dann eben auf offsetX und offsetY, oder detail, oder mouseWheel schauen. Daraus kann man ermitteln, wieweit und in welche Richtung man gescrollt hat.
Bei mir ging es doch darum, dass ich eben nicht wirklich scrollen möchte, sondern nur diese Aktion meines Touchpads verwenden will.