Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

Noir0x · 27-09-2006, 18:47

Ich hab da mal was vorbereitet...

Erklärung:

PHP-Code:

  <body scroll="no" style="overflow:hidden;">

Setzt man diese Anweisung(en) in den <body>-Tag, so sind keine Scrollbars mehr an der Seite, aber scrollen mit dem Mausrad geht ebenfalls nicht mehr.

Mit Hilfe von dem folgenden Script kann man aber trotzdem scrollen.
Hilfreich z.B. in iFrames, bei denen man aus Designgründen auf Scrollbars verzichten muss, aber trotzdem noch die gewohnte Usability bieten möchte.

Bisher getestet und unterstützt von:

Internet Explorer 5.5
Internet Explorer 6 SP1
Internet Explorer 6 SP2
Internet Explorer 7
Firefox 1.5.0.7
Opera 9.00
Safari 2.0.4

So, jetzt zum Script... Die Benutzung ist ganz einfach.
Folgendes kommt einfach in den <head>:

PHP-Code:

  <script>

 
 
function wheel(event)

{

 
    var delta = 0;

 
    if (!event)

    {

        event = window.event;

    }

 
    if (event.wheelDelta)

    {

        delta = event.wheelDelta/120;

        if (window.opera)

        {

            delta = -delta;

        }

    }    

 
     else if (event.detail)

    {

        delta = -event.detail/3;

    }

 
    if (delta)

    {

        if (delta < 0)

        {

            window.scrollBy(0,sdr);

        }

        else

        {

            window.scrollBy(0,-sdr);

        }

    }

}

 
 
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); }

 
window.onmousewheel = document.onmousewheel = wheel;

 
 
sdr = document.documentElement.clientHeight*0.15;

 
 
</script>

Wie kommt es zu der letzen Zeile?
0,15 ist die Konstante, die die Berechnung der Scrollschritte im Internet Explorer darstellt.
Man kann die Konstante auch verändern, dann bekommt man nur "ungewohnte" Scrollschritte.

Viel Spaß damit

Bei Rückfragen bitte hier rein...

derTOM · 27-09-2006, 19:07

super danke!
nach sowas war ich auf Suche...

ricobeck · 27-09-2006, 19:50

danke

poffi · 28-09-2006, 12:04

Danke Noir0x!

Trotzdem sollte das meiner Meinung nach eher spärlich eingesetzt werden. I kenne natürlich den Scrollbalken, der ganz und gar nicht ins Design passt, aber die "gewohnte Usability" wird nicht geboten. Der Scrollbalken zeigt einem immer die Position im Div an und gerade für Besucher die noch eine Maus ohne Scrollrad haben, sieht es schlecht aus.

Cool wäre natürlich ein Scrollbalken auf der Basis von HTML und Javascript, dessen Design man flexible anpassen kann.

Noir0x · 29-09-2006, 14:17

Moin,
Leider ist eine kleine Korrektur nötig!

Beim Verändern der Browsergröße, ändert sich die Variable "sdr" leider nicht.
Folgendes daher bitte hinzufügen:

PHP-Code:

  function setsdr()

{

    sdr = document.documentElement.clientHeight*0.15;

 
}

und noch ein zusätzliches Attribut in den <body>-Tag.

PHP-Code:

  <body scroll="no" style="overflow:hidden;" onload="setsdr();" onresize="setsdr();">

Zitat:

Zitat von poffi

Cool wäre natürlich ein Scrollbalken auf der Basis von HTML und Javascript, dessen Design man flexible anpassen kann.

Hm, ich denk mal drüber nach...

Das müsste es eigentlich jetzt erstmal sein an Korrekturen.
Falls jemand doch noch einen Fehler findet, bitte eine PM schreiben.

Noir0x · 22-04-2007, 15:37

Und auf ein neues:

Jetzt ist es 100% valide und funktioniert in allen Browsern.

PHP-Code:

  <script type="text/javascript">

<!--

 
function wheel(event)

{

 
  var delta = 0;

 
  if (!event)

  {

    event = window.event;

  }

 
  if (event.wheelDelta)

  {

    delta = event.wheelDelta/120;

    if (window.opera)

    {

      delta = -delta;

    }

  }

 
  else if (event.detail)

  {

    delta = -event.detail/3;

  }

 
  if (delta)

  {

    if (delta < 0)

    {

      window.scrollBy(0,sdr);

    }

    else

    {

      window.scrollBy(0,-sdr);

    }

  }

}

 
 
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); }

 
window.onmousewheel = document.onmousewheel = wheel;

 
 
sdr = document.documentElement.clientHeight*0.15;

 
function setsdr()

{

  sdr = document.documentElement.clientHeight*0.15;

  // alert('debug');

}

 
window.onload = setsdr;

window.onresize = setsdr;

 
//-->

</script>

Zusätzlich dazu noch (falls nicht vorhanden) ins Stylesheet folgende Angaben zum Ausblenden der Scrollbalken:

PHP-Code:

  <style type="text/css">

 
html, body {

  overflow:hidden; 

} 

 
</style>

Die Attribute im <body>-Tag sind nun alle überflüssig, bzw. sogar nicht valid.

Lamion · 21-05-2007, 11:23

Hallo Noir!

Ich versuche die Mausradfunktion in Safari zum Laufen zu bringen, aber irgendwie funzt das nicht. habe deinen Script auch benutzt, ohne Erfolg. Die Seite und das tote Mausrad findest Du unter http://www.olegfriesen.eu. Kannst Du mir bitte damit helfen?

Noir0x · 21-05-2007, 13:53

Hi,

hab dir dazu auch eine Email geschrieben. Wenn ich in den Quelltext gucke, stehen dort lauter komische Zeichen, die da wirklich nicht reingehören.

Deswegen funktioniert das ganze auch nicht.

MilkmanMedia · 06-06-2007, 13:21

hi,

ich hoffe ich verstehe das richtig:
mit dem script wird doch ein neuer eventhandler (onmousewheel) erstellt. aber wo ist die scroll-funktion die ich über diesen eventhandler aufrufe?

gruß milkman

Noir0x · 06-06-2007, 14:33

Die Funktion heißt "wheel" und steht ganz am Anfang.

onmousewheel ist ein existierender Eventhandler, dem jetzt per JavaScript ein Ereignis (namens "wheel") zugeordnet wird.

Es gibt da mehrere if-Schleifen, damit das auch mit allen Browser funktioniert, da manche andere Namen für den Eventhandler benutzen (z.B. DOMMouseScroll)...

Warum fragst du?

SAMI0x · 16-01-2008, 12:00

Hallo Noir,

ich suche eine Lösung für das scrollen in Richtung x-Achse trotz overflow:hidden-Vorgabe im Stylesheet. Kannst Du mir bitte damit helfen?

Noir0x · 19-01-2008, 16:07

Hallo SAMI0x,

du hast Glück, dass ich deine Anfrage sehe, denn ich war schon lang nicht mehr hier

Also, das x-Scrollen müsste generell genau wie oben beschrieben möglich sein.
Du musst dafür folgende Codezeile ändern:

PHP-Code:

    if (delta) 

  { 

    if (delta < 0) 

    { 

      window.scrollBy(0,sdr); 

    } 

    else 

    { 

      window.scrollBy(0,-sdr); 

    } 

  }

in die folgende (die (0,sd) einfach rumdrehen

):

PHP-Code:

    if (delta) 

  { 

    if (delta < 0) 

    { 

      window.scrollBy(sdr,0); 

    } 

    else 

    { 

      window.scrollBy(-sdr,0); 

    } 

  }

Das ist jetzt rein theoretisch, aber es müsste klappen.

Lg,
Noir0x

Noir0x · 04-02-2008, 16:45

Achtung UPDATE!!!

Da der Internet Explorer 7 anscheinend nicht den aktuellen W3C-Standard einhält (wer hätte auch gedacht...) musste ich am aktuellen Code noch einmal nachbessern.

Hier die aktuelle Version:

PHP-Code:

  function wheel(event) 

{ 

 
    var delta = 0; 

 
    if (!event) 

    { 

        event = window.event;

    } 

 
    if (event.wheelDelta) 

    { 

        delta = event.wheelDelta/120; 

        if (window.opera) 

        { 

            delta = -delta;

        } 

    } 

 
    else if (event.detail) 

      { 

        delta = -event.detail/3;

    } 

 
      if (delta) 

    {    

        if (delta < 0) 

        { 

            window.scrollBy(0,sdr); 

        } 

        else 

        { 

            window.scrollBy(0,-sdr);

        } 

    } 

} 

 
 
 
 
 
 
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } 

 
window.onmousewheel = document.onmousewheel = wheel; 

 
 
function setsdr() 

{ 

    if (window.innerHeight)

    {

        sdr = window.innerHeight*0.15;

    }

    else if (document.documentElement && document.documentElement.clientHeight)

    {

        sdr = document.documentElement.clientHeight*0.15;

    }

    else if (document.body)

    {

        sdr = document.body.clientHeight*0.15;

    }

 
    // alert('debug');

} 

 
window.onload = setsdr; 

window.onresize = setsdr;

27-09-2006, 18:47	#1 (permalink)
Noir0x Neuer User Registriert seit: Jun 2004 Beiträge: 780	[Stuff] Mousewheel scrollen (ohne Scrollbar) Ich hab da mal was vorbereitet... Erklärung: PHP-Code: `<body scroll="no" style="overflow:hidden;">` Setzt man diese Anweisung(en) in den <body>-Tag, so sind keine Scrollbars mehr an der Seite, aber scrollen mit dem Mausrad geht ebenfalls nicht mehr. Mit Hilfe von dem folgenden Script kann man aber trotzdem scrollen. Hilfreich z.B. in iFrames, bei denen man aus Designgründen auf Scrollbars verzichten muss, aber trotzdem noch die gewohnte Usability bieten möchte. Bisher getestet und unterstützt von: Internet Explorer 5.5 Internet Explorer 6 SP1 Internet Explorer 6 SP2 Internet Explorer 7 Firefox 1.5.0.7 Opera 9.00 Safari 2.0.4 So, jetzt zum Script... Die Benutzung ist ganz einfach. Folgendes kommt einfach in den <head>: PHP-Code: <script> function wheel(event) { var delta = 0; if (!event) { event = window.event; } if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) { delta = -delta; } } else if (event.detail) { delta = -event.detail/3; } if (delta) { if (delta < 0) { window.scrollBy(0,sdr); } else { window.scrollBy(0,-sdr); } } } if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; sdr = document.documentElement.clientHeight*0.15; </script> Wie kommt es zu der letzen Zeile? 0,15 ist die Konstante, die die Berechnung der Scrollschritte im Internet Explorer darstellt. Man kann die Konstante auch verändern, dann bekommt man nur "ungewohnte" Scrollschritte. Viel Spaß damit Bei Rückfragen bitte hier rein...

27-09-2006, 19:07	#2 (permalink)
derTOM Stammgast Registriert seit: Nov 2001 Ort: Linz Beiträge: 402	super danke! nach sowas war ich auf Suche... __________________ m.f.g.derTOM Eder Thomas \| Austria \| Linz

27-09-2006, 19:50	#3 (permalink)
ricobeck zimmer 101 Registriert seit: Jul 2003 Ort: LE Beiträge: 1.581	danke __________________ Illogical comparison with NaN. Any comparison operation involving NaN will evaluate to false because NaN != NaN. ricobeck.de

28-09-2006, 12:04	#4 (permalink)
poffi Neuer User Registriert seit: Oct 2003 Ort: Waldkirch, St.Gallen, CH Beiträge: 1.248	Danke Noir0x! Trotzdem sollte das meiner Meinung nach eher spärlich eingesetzt werden. I kenne natürlich den Scrollbalken, der ganz und gar nicht ins Design passt, aber die "gewohnte Usability" wird nicht geboten. Der Scrollbalken zeigt einem immer die Position im Div an und gerade für Besucher die noch eine Maus ohne Scrollrad haben, sieht es schlecht aus. Cool wäre natürlich ein Scrollbalken auf der Basis von HTML und Javascript, dessen Design man flexible anpassen kann. __________________ mfg poffi

22-04-2007, 15:37	#6 (permalink)
Noir0x Neuer User Registriert seit: Jun 2004 Beiträge: 780	Und auf ein neues: Jetzt ist es 100% valide und funktioniert in allen Browsern. PHP-Code: <script type="text/javascript"> <!-- function wheel(event) { var delta = 0; if (!event) { event = window.event; } if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) { delta = -delta; } } else if (event.detail) { delta = -event.detail/3; } if (delta) { if (delta < 0) { window.scrollBy(0,sdr); } else { window.scrollBy(0,-sdr); } } } if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; sdr = document.documentElement.clientHeight0.15; function setsdr() { sdr = document.documentElement.clientHeight0.15; // alert('debug'); } window.onload = setsdr; window.onresize = setsdr; //--> </script> Zusätzlich dazu noch (falls nicht vorhanden) ins Stylesheet folgende Angaben zum Ausblenden der Scrollbalken: PHP-Code: `<style type="text/css"> html, body { overflow:hidden; } </style>` Die Attribute im <body>-Tag sind nun alle überflüssig, bzw. sogar nicht valid.

21-05-2007, 11:23	#7 (permalink)
Lamion Neuer User Registriert seit: Feb 2005 Beiträge: 153	Hallo Noir! Ich versuche die Mausradfunktion in Safari zum Laufen zu bringen, aber irgendwie funzt das nicht. habe deinen Script auch benutzt, ohne Erfolg. Die Seite und das tote Mausrad findest Du unter http://www.olegfriesen.eu. Kannst Du mir bitte damit helfen?

21-05-2007, 13:53	#8 (permalink)
Noir0x Neuer User Registriert seit: Jun 2004 Beiträge: 780	Hi, hab dir dazu auch eine Email geschrieben. Wenn ich in den Quelltext gucke, stehen dort lauter komische Zeichen, die da wirklich nicht reingehören. Deswegen funktioniert das ganze auch nicht.

06-06-2007, 13:21	#9 (permalink)
MilkmanMedia Neuer User Registriert seit: Jun 2007 Beiträge: 1	hi, ich hoffe ich verstehe das richtig: mit dem script wird doch ein neuer eventhandler (onmousewheel) erstellt. aber wo ist die scroll-funktion die ich über diesen eventhandler aufrufe? gruß milkman Geändert von MilkmanMedia (06-06-2007 um 14:00 Uhr)

06-06-2007, 14:33	#10 (permalink)
Noir0x Neuer User Registriert seit: Jun 2004 Beiträge: 780	Die Funktion heißt "wheel" und steht ganz am Anfang. onmousewheel ist ein existierender Eventhandler, dem jetzt per JavaScript ein Ereignis (namens "wheel") zugeordnet wird. Es gibt da mehrere if-Schleifen, damit das auch mit allen Browser funktioniert, da manche andere Namen für den Eventhandler benutzen (z.B. DOMMouseScroll)... Warum fragst du?

16-01-2008, 12:00	#11 (permalink)
SAMI0x Neuer User Registriert seit: Jan 2008 Beiträge: 1	Hallo Noir, ich suche eine Lösung für das scrollen in Richtung x-Achse trotz overflow:hidden-Vorgabe im Stylesheet. Kannst Du mir bitte damit helfen?

19-01-2008, 16:07	#12 (permalink)
Noir0x Neuer User Registriert seit: Jun 2004 Beiträge: 780	Hallo SAMI0x, du hast Glück, dass ich deine Anfrage sehe, denn ich war schon lang nicht mehr hier Also, das x-Scrollen müsste generell genau wie oben beschrieben möglich sein. Du musst dafür folgende Codezeile ändern: PHP-Code: `if (delta) { if (delta < 0) { window.scrollBy(0,sdr); } else { window.scrollBy(0,-sdr); } }` in die folgende (die (0,sd) einfach rumdrehen): PHP-Code: `if (delta) { if (delta < 0) { window.scrollBy(sdr,0); } else { window.scrollBy(-sdr,0); } }` Das ist jetzt rein theoretisch, aber es müsste klappen. Lg, Noir0x

04-02-2008, 16:45	#13 (permalink)
Noir0x Neuer User Registriert seit: Jun 2004 Beiträge: 780	Achtung UPDATE!!! Da der Internet Explorer 7 anscheinend nicht den aktuellen W3C-Standard einhält (wer hätte auch gedacht...) musste ich am aktuellen Code noch einmal nachbessern. Hier die aktuelle Version: PHP-Code: function wheel(event) { var delta = 0; if (!event) { event = window.event; } if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) { delta = -delta; } } else if (event.detail) { delta = -event.detail/3; } if (delta) { if (delta < 0) { window.scrollBy(0,sdr); } else { window.scrollBy(0,-sdr); } } } if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; function setsdr() { if (window.innerHeight) { sdr = window.innerHeight0.15; } else if (document.documentElement && document.documentElement.clientHeight) { sdr = document.documentElement.clientHeight0.15; } else if (document.body) { sdr = document.body.clientHeight*0.15; } // alert('debug'); } window.onload = setsdr; window.onresize = setsdr;

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln