Dumme Frage zur Seitenverschiebung durch Scrollbar

xmatthias

Hallo liebe Spezialisten.

Ich hab nach langem hin und her nun meine Website so halbwegs fertig. Was mich allerdings jetzt noch sehr stört (ka. ob man dagegen was tun kann) ist, dass ich bei ein paar Seiten ohne Scrollbar auskommen und bei manchen eine brauche. Das ansich ist nicht das Problem, das Problem ist das ich den Container horizontal mittig auf der Seite plaziert habe und sich jetzt natürlich die ganze Seite nach links verschiebt wenn rechts der Scrollbar kommt. Wenn man die Links nun nacheinander ankickt springt die Seite nun immer ca. 5mm nach links (aus der Mitte) und wieder zurück.

Gib es da ne Möglichkeit was zu unternehmen, ausser auf allen Seiten mit/ohne Scrollbar auszukommen?

Danke, lg

Dodo

"Es gibt keine dummen Fragen - nur dumme Antworten"

Du könntest entweder mehr Inhalt reingeben, damit jede Seite einen Scrollbar hat oder deine Seite grundsätzlich ohne Scrollbar machen und den Scrollbar per CSS in einen Container geben ( http://www.haar-studio.com )

Eine weitere Möglichkeit wäre es, den Scrollbar per CSS immer anzeigen zu lassen: "overflow: scroll;"
http://de.selfhtml.org/css/eigenschaf…ng.htm#overflow

sejuma

http://www.ohne-css.gehts-gar.net/0052.php

Pion

Öhm ich finde solche Möglichkeit eine Scrollbar zu erstellen obwohl sie nicht benötigt wird sinnlos

Verschiebe einfach dein Design 20 px Ausermittig nach links
oder richte es Absolut aus

Wenn du uns nen Link schickst mach ich es dir

mfg

MyXoToD

Zitat von sejuma

http://www.ohne-css.gehts-gar.net/0052.php

Diese Lösung finde ich irgendwie nicht gerade sehr toll... Da man den Scrollbalken auch noch scrollen kann obwohl es eigentlich überhaupt nicht notwendig ist.

Die Möglichkeit mit overflow: scroll; find ich da echt noch am besten, der Scrollbalken ist halt dann da, obwohl er nicht gebraucht wird, aber er kann auch nicht gescrollt werden.

Mich persönlich stört an diesem "ruckeln" garnichts. Ich finde eher das wechseln von wenig zu viel Content kacke
Man sollte immer genug Content drin haben und das gut verteilt.

Dodo

Zitat von Pion

Verschiebe einfach dein Design 20 px Ausermittig nach links
oder richte es Absolut aus

Und dann "ruckelt" es trotzdem, wenn der scrollbalken einmal da ist und einmal nicht

Pion

Was soll da ruckeln wenn das Deisgn sich nicht verschiebt?

mfg

Dodo

Zitat von Pion

Was soll da ruckeln wenn das Deisgn sich nicht verschiebt?

mfg

das design verschiebt sich ja
wenn man es mittig ausrichtet ist der scrollbalken immer einberechnet, wenn er da ist. Wenn er nicht vorhanden ist, eben nicht,

Pion

Joa deswegen so ausrichten wie ich es sagte, musst dich halt an links orientieren

mfg

Dodo

Zitat von Pion

Joa deswegen so ausrichten wie ich es sagte, musst dich halt an links orientieren

mfg

und wie soll es dann mittig werden? wenn die breite variiert?

Pion

Hm stimmt dafür gibts in CSS keine Variante

Ich würde dennoch JS vor overflow scroll bevorzugen

mfg

Dodo

Und wie willst du das per JS lösen? Ohne dass es ruckelt?

Pion

Da gibts sicherlich mehr Lösungen

Sponatn würde ich folgende vorschlagen:
- Scrollbar im Window erkennen und design dann danach ausrichten

- Statt einfach mittig auszurichten per Javascript einen festen Abstand vom linken Rand festzulegen, der sich anhand des Viewport des browsers richtig einstellt

mfg

Dodo

Zitat von Pion

- Scrollbar im Window erkennen und design dann danach ausrichten

- Statt einfach mittig auszurichten per Javascript einen festen Abstand vom linken Rand festzulegen, der sich anhand des Viewport des browsers richtig einstellt

Und beide Lösungen können erst richtig arbeiten, wenn die Seite einmal vollkommen aufgebaut ist, was zur Folge hat, dass sich die Seite nach dem Aufbau manchmal verrückt.

Pion

Zitat von Dodo

Und beide Lösungen können erst richtig arbeiten, wenn die Seite einmal vollkommen aufgebaut ist, was zur Folge hat, dass sich die Seite nach dem Aufbau manchmal verrückt.

Man kann JS ausführen bevor ein Seite ausgegeben wird

Edit hier ein Lösung ist aber nur für FF bei mir daheim ausgelegt aber nur zu veranschaulichen wie es gehen würde zb man kann auch ohne position absolut arbeiten wenn einem das nicht gefällt:

PHP

<script>
function checkScroll()
{
  var fudgeFactor = document.all? 4: 6; // Moz only
  var docHeight, totalHeight;


  if (document.all && document.documentElement && document.documentElement.clientHeight)
    docHeight = document.documentElement.scrollHeight;
  else if (document.all)
    docHeight = document.body.scrollHeight;
  else
    docHeight = document.height;
  docHeight = parseInt(docHeight) + fudgeFactor;


  if (self.innerHeight)
    totalHeight = parseInt(self.innerHeight);
  else
    totalHeight = parseInt(document.body.offsetHeight);


  if (docHeight > totalHeight)
    return 1;
  else
    return 0;
}


function test()
{
    scrollbarwidth = outerWidth-innerWidth;

    scrollbarwidth = -500 + scrollbarwidth+'px';

contentwidth = -1000 - scrollbarwidth+'px';
if(checkScroll()==1)
{
document.getElementById("container").style.width=contentwidth;
document.getElementById("container").style.left="50%";    
document.getElementById("container").style.position="absolute";    
document.getElementById("container").style.marginLeft=scrollbarwidth;
    }
else
{
document.getElementById("container").style.width="1000px";
document.getElementById("container").style.left="50%";    
document.getElementById("container").style.position="absolute";    
document.getElementById("container").style.marginLeft="-500px";    
    }


}
</script>
<body onLoad="test();">
<div id='container' style=" border:1px solid black;">
  <?php


 if($_GET['a']=='1')
{
?>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <?php
}


else
{
?>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <?


}


?>
</div>
</body>

Alles anzeigen

Dodo

onload="..." wird erst ausgeführt, wenn die Seite fertig geladen ist.
Je größer die Seite ist, desto länger wird es dauern, bis die Seite rüberrückt.
Vor allem, wenn die Seite viele Bilder hat, dauert das äußerst lang.

Und erst dann beginnt dein Script zu arbeiten.

Pion

Gut wenn das stört könnte man auch ohne Onload aber mit einer anderen Vorrangehensweise arbeiten:

- Js wird nicht im Onload aufgerufen
- Sondern normal im Header
- Das JS erstellt eine Div und hängt es oben in das Document ein diese regelt den abstand in dem die breite je nach dem eben anders varieert

Oder man gibt einfach die ganze Serite per document write aus

mfg

Dodo

Wenn man es kompliziert machen will und JavaScript für Designzwecke missbrauchen will - es ist ja eigentlich für die Interaktion da -, dann klappts das.

Mit einer Änderung: Die Breite den äußeren Divs kann man nicht abfragen, solange man sie nicht setzt. Man muss auf den Scrollbalken zurückgreifen.

Pion

Ja schön sind die Möglichkeiten bis jetzt nicht werde mich mal noch schlauer machen denn eine dauerhafte Scrollbar ist äußerst unschön

mfg

Dumme Frage zur Seitenverschiebung durch Scrollbar

Tags

Benutzer online in diesem Thema