Autor Zpráva
radekt
Profil
Ahoj,
setkal jsem se s požadavkem zákazníka, aby byl scroll top button za každých okolností přesně uprostřed výšky viewportu. Na vertikální zarovnání se dá použít třeba to, že pro obal použije display: table a pro prvek v něm - v tomto případě scroll top - button display: table-cell a vertical-align: middle. Jenomže to ovlivní i ostatní prvky, což nechci. Podobně řešení Yuhů. Použil jsem jednotku vh a zarovnané to je:

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  #blok1 {
    float: left;
    width: 50%;
    background: grey;
  }
  
  #blok2 {
    background: brown;
  } 
  
  #scroll_top {
    position: fixed;
    z-index: 1;
    text-decoration: none;
    font-size: 3vh;
    height: 5vh;
    /* 50 - (height/2) */
    top: 47.5vh;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: .2em .4em;
    font-weight: 400;
    color: #fff;
    background: #4682B4;
    background: rgba(70, 130, 180, 0.7);
    /*display: none;*/
    right: 1.5rem;
  }  
  </style>
</head>
<body>

<div id="blok1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<div id="blok2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div id="scroll_top">^</div>

</body>
</html>


Problém je však, že na malých displejích je scroll top button proporcionálně prťavý. Samozřejmě i to se dá řešit pomocí media queries a pro různé šířky obrazovky dávat scroll top buttonu jiné rozměry. Chci se zeptat - není nějaké elegantnější řešení?
Díky
Radek
Str4wberry
Profil
Nevím, jestli dobře rozumím, ale proč to neudělat takto? Živá ukázka
radekt
Profil
Str4wberry:
Děkuji, otestuji. Co přesně tam dělá ten záporný margin-top?
Keeehi
Profil
radekt:
Centrování. top: 50% posune vršek elementu do poloviny. Takže je potřeba ho vrátit o polovinu jeho výšky. To já 30px, tak proto záporný poloviční margin.
radekt
Profil
Jasně, že mě to hned netrklo, díky. Přesto - testoval jsem na nejnovějším Firefoxu a Chrome (rozlišení 1680x1050) - to zarovnáno doprostřed není. Záhada.
Tomáš123
Profil
radekt:
Dodal by si, prosím, živú ukážku a odkaz na snímku obrazovky?
radekt
Profil
Tomáš123:
Takže resumé: když jsem to aplikoval do jednoho projektu, tak to zarovnané není, s něčím se to hádá a jelikož je tam kontejnerů a stylů víc, budu si muset vyčlenit nějaký čas na delší pátrání, někde mám z tohoto hlediska chybu. Testovací vzorek funguje. Každopádně děkuji za nakopnutí správným směrem.
Tomáš123
Profil
radekt:
Nepoužívaš náhodou namiesto position: fixed position: absolute? Fixná pozícia sa počíta vždy od zobrazovacej plochy prehliadača; absolútna od najbližšieho nadradeného prvku s nestatickou pozíciou* alebo (v prípade, že žiadny taký prvok neexistuje), takisto od zobrazovacej plochy prehliadača*.

* Označené časti textu sú na JPW trochu nepresne popísané – definícia obmedzujúceho bloku; prvý odsek pod definíciou absolútnej pozície:
– aj fixne poziciovaný prvok tvorí obmedzovací blok
– v prípade, že žiadny prvok nie je nestaticky poziciovaný, obmedzujúcim blokom nie je prvok <body> ale zobrazovacia plocha prehliadača (otestované v IE11, Firefox 46.0.1, Edge 25.10586.0.0).
radekt
Profil
Tomáš123:
Používám position: fixed, kde je tedy zakopaný pes, nevím. A jak jsem psal, ty stránky jsou trošku komplikovanější, navíc s kompletně převzatým html a css (dělám jim redesign a scroll top button jsem tam přidal), což situaci komplikuje ještě více. No, čeká mě detektivní práce ;o).
radekt
Profil
Ahoj, Str4wberry na srazu říkal, ať dám živou ukázku, takže tady je. Jedná se o zkušební web a zde ten scroll top button vertikálně zarovnaný není. Podotýkám, že není přímo v html, ale přidává se tam pomocí jQuery a ve stylování scroll top buttonu jsem přidal nějaké další věci pro svou potřebu.
radekt
Profil
Už jsem na to přišel, měl jsem pro scroll top button definice v různých Media Queries, které se mezi sebou tloukly. V týdnu ještě provedu důkladnější testy napříč desktopovými a mobilními prohlížeči, ale myslím, že už to bude v poho.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0