Srollen nur innerhalb einer Box, solange Mauszeiger dort ist.

[robertko]

Hallo.
Ich weiß nicht, ob es möglich ist und ob ich hier überhaupt richtig bin, da es eine allgemeine html bzw. css Frage ist.

Ich habe 2 Kategoriebox, mit einer festen größe die sich scrollen lassen.
Nun ist es so, dass wenn man zum Beispiel bis nach ganz unten in der Box gescrollt hat, es ja nicht mehr weiter geht. Nun ist es aber so, dass wenn man dann weiter am Mausrad dreht, nun die gesamte Shopseite nach unten scrollt. Lässt sich dies irgendwie unterbinden, solange der Mauszeiger sich noch in der Box befindet?
Ich hoffe ihr versteht worum es geht. weiß gerade nicht, wie ich das anders erklären soll.

Danke

Linkback: https://www.modified-shop.org/forum/index.php?topic=33032.0

[hpzeller]

Hallo robertko

Man könnte mit JavaScript (jQuery) das Bodyscrollen temporär unterdrücken und das geht folgendermassen.

Den Kategorieboxen folgende CSS-Klasse  'scroll-this-box-only' z.B. so class="scroll-this-box-only" oder so class="class1 class2 scroll-this-box-only" wenn bereits schon Klassen bestehen hinzufügen

Dann in 'templates/DEIN_TEMPLATE/javascript/general.js.php' folgenden Code

Code: PHP  [Auswählen]

?>
<?php // EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
 

ersetzen mit

Code: PHP  [Auswählen]

?>
<script type="text/javascript">
/* <![CDATA[ */
      $(function() {
              $('.scroll-this-box-only').mouseenter(function(){            
                  $('body').css({"overflow": "hidden"});
              }).mouseleave(function(){
                  $('body').css({"overflow": "auto"});
              });
      });
/*]]>*/
</script>
<?php // EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
 

Gruss
Hanspeter

[robertko]

Es ist immer wieder ein Vergnügen deinen Namen in meinen Beiträgen lesen zu dürfen.
 
Ich danke dir vielmals.
Werde es später mal ausprobieren.
Ich weiß nicht ob es wichtig ist, aber ich nutze das jQuery Plugin "Jscrollpane".
Ich danke dir vorerst.
Melde mich dann nochmal.

[robertko]

Sooo, hab das jetzt mal eingebaut und es funktioniert sehr gut.
Eine sache stört mich noch:
Unzwar:
Wenn man jetzt mit der Maus über die Box fährt verschwindet der Scrollbalken der Mainpage (body).
Das ist auch richtig und soll so sein, aber dadurch spring meine Seite jetzt um die Breite des Balkens nach rechts.
Das sieht doof auf.
Kann man das irgendwie unterdrücken?

[robertko]

Alles klar,
Bin selbst drauf gekommen.
Hab deinen Code um ein padding-right erweitert.
Läuft !!!
Danke.

Code: PHP  [Auswählen]

     
$(function() {
          $('.scroll-this-box-only').mouseenter(function(){            
                  $('body').css({"overflow": "hidden","padding-right": "17px"});
              }).mouseleave(function(){
                  $('body').css({"overflow": "auto","padding-right": "0px"});
              });
         });

[hpzeller]

Mit dem 'Padding-right = 17px' bei 'overflow = hidden' das Du der Seite gibst behebst Du das Springen der Seite zwar in Chrom, FF, Safari, aber z.B. im IE10 verursachst Du es.
Ausserdem springt die Seite jetzt auf allen Tablet-Pc's und Smartphones, dies ist natürlich nur relevant wenn dein Shopdesign für diese Geräteklassen geeignet ist, wenn es das aber nicht ist, hättest Du sowieso ein erhebliches Handicap, da ja die mobile Nutzung des Internets bekanntlich rasant steigt und Google mittlerweile nicht mobile-taugliche Seiten quasi abstraft.

Gruss
Hanspeter

[robertko]

Sehr guter Einwand.
Mache das Design größtenteils nur in Firefox, vergleiche zwischen den Browsern hin und wieder auch aber das habe ich noch nicht kontrolliert.
Was das Responsive-Design angeht, bin ich noch am arbeiten. Teilbereiche des Templates sind schon überarbeitet, zwar noch nicht responsive, aber die voraussetzung ist geschaffen.
Das wird auf jedenfall das nächste große Projekt. Mir ist momentan erstmal wichtig das der Shop fertig wird, funktioniert und an den Start geht.
Was das Springen der Seite angeht, dass lässt sich ja widerum mit css beheben.
Warum ist der iE nur so eigen?
Schon seit Ewigkeiten macht er sein eigenes Ding. Das nervt.

EDIT: Hab die Seite gerade mal auf meinem Iphone aufgerufen, aber da springt nichts.

Ich weiß nicht, ob es was damit zu tun hat, aber ich habe kürzlich in die header.php im <head>-tag den Meta Viewport definiert, dass sich die Seite schonmal etwas an kleinere Bildschirme anpasst.

EDIT:
Nochwas. Ehrlich gesagt, weiß ich garnicht wie es vorher war, aber ich habe gerade mal unter Windows 7 den iE8 aufgemacht und meine Seite aufgerufen, aber jetzt lässt sich die Box garnicht mehr scrollen.
Ich werde gleich nochmal deine class aus der Box nehmen und nochmal probieren, aber komisch ist das schon.

[Matt]

Mich würde ja mal der konkrete Anwendungsfall interessieren, der diesen doch sehr starken Eingriff in ein Verhalten, dass der User in- und auswendig kennt, rechtfertigt.

[robertko]

Hi Matt.
Mich nervt das persönlich.
Das ist auch schon alles.
Wenn ich es Browserübergreifend nicht hinbekomme, ohne dass da was springt oder was auch immer, nehme ich es wieder raus. Ich weiß, dass es normal ist, aber schön ist es nicht. Zumal man beim scrollen auch nicht immer den Balken im Blick hat und weiß, wann schluss ist, und wenn man dann zu weit scrollt und die ganze Seite fängt plötzlich an zu scrollen, nervt mich das einfach.