Scrollbar auf div Box mit fixed Elementen

mipezhoe · 07/23/2014, 01:45

HTML Code:

<!DOCTYPE html>
<html>
  
  <head data-gwd-animation-mode="proMode">
    <title>Meanwhile @ mipez' // Twitch Stream</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="Google Web Designer 1.0.6.0428">
    <style type="text/css">
      html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
      }
      body {
        background-color: transparent;
        -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-style: preserve-3d;
      }
      .gwd-div-stream1 {
        position: fixed;
        left: 50px;
        bottom: 300px;
      }
      .gwd-div-embchat {
      position:fixed;
      left:1100px;
      bottom:295px;
       opacity: 0.6;
   	 filter: alpha(opacity=60);
      }
      .gwd-div-iemi {
		position:fixed;
		left: 50px;
        bottom: 860px;
        text-align: left;
        font-family:'Fjalla One';
        font-size: 36px;
      }
      .gwd-div-embchat:hover {
      opacity: 1.0;
   	 filter: alpha(opacity=100);
     }
      .gwd-img-s4pic {
      position:fixed;
      z-index:-1;
      bottom:0px;
      left:1000px;
      }
      .gwd-div-scroll {
      overflow: scroll;
      height:100%;
      width:100%;
      left:0px;
      top:0px;
      position:relative;
      }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/ico" href="logo_small.ico">
  </head>
  
  <body><div class="gwd-div-scroll">
    <object class="gwd-div-stream1" type="application/x-shockwave-flash" height="540" width="960" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=threalmipez" bgcolor="#000000">
      <param name="allowFullScreen" value="true">
      <param name="allowScriptAccess" value="always">
      <param name="allowNetworking" value="all">
      <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf">
      <param name="flashvars" value="hostname=www.twitch.tv&channel=threalmipez&auto_play=true&start_volume=25">
    </object>
    <div class="gwd-div-iemi">Meanwhile @ mipez'</div>
    <div class="gwd-div-embchat">
    <iframe frameborder="0" scrolling="yes" src="http://twitch.tv/threalmipez/chat?popout=" height="535" width="350"></iframe>
    </div>
    <img class="gwd-img-s4pic" src="4-30.png">
    </div>
  </body>

</html>

Ich hab eine Seite mit Content und will bzw. hab das alles über fixed gelöst, jetzt lassen sich die Elemente natürlich nicht bei verändertem Fenster erreichen.

Der Befehl overflow:scroll bzw overflow:auto bringt zwar eine Scrollbar, allerdings ohne diese zum Scrollen freizugeben.

.StarSplash · 07/23/2014, 05:11

Warum benutzt du denn überhaupt fixed wenn du eigentlich nichts fixed haben willst?

mipezhoe · 07/23/2014, 10:57

Quote:

Originally Posted by .StarSplash

Warum benutzt du denn überhaupt fixed wenn du eigentlich nichts fixed haben willst?

Mir hats mit Absolute und Relative immer sämtliche Elemente quer über den ganzen Bildschirm verschoben, es soll ja fixed sein, is hier im Forum ja optisch ähnlich.

flogi333 · 07/23/2014, 22:12

Quote:

Mir hats mit Absolute und Relative immer sämtliche Elemente quer über den ganzen Bildschirm verschoben, es soll ja fixed sein, is hier im Forum ja optisch ähnlich.

Im Elitepvpers Forum sehe ich auf die schnelle kein einziges Element, das mit fixed gestaltet wird. Du weißt hoffentlich, das fixed-Elemente den Sinn habe, dass, selbst wenn man scrollen könnte, das Element immer an der selben Stelle bleibt. z.B. Wenn die Leiste ganz oben in epvp immer sichtbar wäre egal ob du hinunter scrollst, wäre das ein Indiz, dass sie mit fixed gestaltet wurde.

Aus diesem Grund wird auch für übergroße fixed-Elemente keine Scroll Funktion angeboten, da sie ja sowieso immer an einer Stelle bleiben soll. Würde also keinen Sinn machen.

.StarSplash · 07/23/2014, 23:04

Hier im Forum ist rein gar nichts fixed, das würde auch keinen Sinn machen. Schau dir mal die anderen Position-Attribute an, die sind wohl eher das, was du brauchst.