Nedávno jsem pracoval na pokročilém řešení gridu založeném na JavaScriptu a řeknu vám:je to docela závazek. Zajistit, aby mřížka byla přístupná, reaktivní, efektivní a kompatibilní s různými prohlížeči, je obtížné, ale i drobné práce každého z nich jsou obtížné. Jedním malým úkolem bylo zjistit šířku svislého posuvníku, abych věděl, jak široké bylo skutečně tělo mřížky. Zde je malý úryvek, jak to udělat:
CSS
Prvek, který vytvoříme pro měření, bude muset být umístěn mimo obrazovku, aby si ho uživatel nevšiml:
/* way the hell off screen */
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
Tyto styly byste mohli přidat přímo do prvku, ale trochu by nafoukly část JavaScriptu.
JavaScript
Samozřejmou součástí je vytvoření DIV pro vložení do DOM a přidání třídy CSS, kterou jsme vytvořili výše:
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac: 15
// Delete the DIV
document.body.removeChild(scrollDiv);
S prvkem na stránce, odečtením clientWidth z offsetWidth udává velikost posuvníku! Posledním krokem je odstranění DIV z DOM a hotovo!
Vzhledem k tomu, že velikost posuvníku se mezi Macem a Windows (a dokonce i Internet Explorerem 7 a jinými verzemi IE) liší, tento malý, ale dynamický úryvek je přesně to, co jsem potřeboval k nalezení skutečné oblasti obsahu kontejneru. Neváhejte převést tento úryvek JavaScriptu do libovolného rámce JavaScript, který preferujete!