Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="commentsWrapper"> <div class="commentsList"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, cum, quasi, neque minima cumque quos natus accusantium perferendis tenetur nulla enim delectus recusandae ea velit harum explicabo debitis ad aspernatur.</p> <p>Numquam, quasi, quod, vero fugiat deserunt earum facere natus molestias quos at accusamus nulla doloremque labore modi qui? Temporibus, error, perferendis sapiente vel quam alias in ipsum pariatur laborum tempore.</p> <p>Ea, itaque, amet, aliquam adipisci ducimus provident quos quis natus debitis dolorum explicabo qui nostrum veniam error atque numquam odit dicta sed mollitia aliquid. Repellat, earum iusto similique distinctio tempora?</p> <p>Sequi, minima, adipisci nam vel consequatur perferendis possimus aperiam in voluptatem nihil eos expedita dicta ad aspernatur laudantium neque ducimus architecto non natus quod illum quae assumenda unde maxime nesciunt.</p> <p>Repudiandae, dolorem, sit facilis suscipit eveniet nam error magnam sapiente. Natus, eaque, laudantium, maiores, provident suscipit deserunt ratione delectus debitis iure placeat in eveniet fugiat temporibus ducimus aut soluta fuga.</p> <p>Corporis, et, nostrum, magnam voluptates soluta veritatis distinctio consequuntur quod voluptatibus voluptas blanditiis minus praesentium quasi quas nobis explicabo ducimus nisi. Laborum, iste ipsum sint consectetur beatae dignissimos delectus! Pariatur.</p> <p>Totam, optio vero at eos tenetur unde maiores perspiciatis ut consequuntur delectus! Neque, cupiditate, in, aliquam totam amet accusantium provident nesciunt voluptate tempora explicabo omnis asperiores ab distinctio incidunt error.</p> <p>Sequi, aliquid, rerum doloremque odio nisi harum numquam necessitatibus consectetur nemo nam reiciendis reprehenderit dolore. Eaque, iure id quam adipisci commodi officia quaerat unde repellat saepe quibusdam dolorem ipsam dignissimos.</p> <p>Ab, animi, amet laudantium quia pariatur reiciendis molestias perferendis tempora eum corporis quibusdam aliquid praesentium facere recusandae magnam veritatis eligendi magni consequuntur nihil sequi consectetur vitae soluta? Voluptatibus, architecto, minus.</p> <p>Facilis, quis maxime natus similique voluptas consequuntur dolorum error? Provident laudantium aperiam vero ea et voluptatibus pariatur ipsum fugiat at ex. Explicabo, illo blanditiis eaque sapiente optio perferendis adipisci nesciunt.</p> <p>Debitis quisquam eaque numquam accusantium in soluta qui ab nam dolorem. Nobis, aliquam, necessitatibus, veritatis vero porro in esse repellat nihil quam ex accusantium provident reiciendis eius aut pariatur omnis!</p> <p>Praesentium, similique, natus, voluptate veniam rerum error aspernatur magni impedit repellendus dignissimos ut consequatur quo fugiat. Omnis, quo, doloremque ex commodi dolor deleniti alias eligendi quas officia quisquam consectetur doloribus.</p> </div> <div class="overflowIndicator">Další komentáře…</div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
div.commentsWrapper { position: relative; } div.commentsWrapper div.commentsList { max-height: 15em; overflow: auto; } div.commentsWrapper div.overflowIndicator { text-align: center; padding: 1em; background-color: gray; color: white; opacity: 0.95; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; }
CSS
Autoformát
CSS reset
Až na konci
function CommentsStylizer(wrapper){ var calculateScrollbarWidth = function(){ // http://stackoverflow.com/a/13382873 var outer = document.createElement('div'); outer.style.visibility = 'hidden'; outer.style.width = '100px'; listElement.appendChild(outer); var widthNoScroll = outer.offsetWidth; outer.style.overflow = 'scroll'; var inner = document.createElement('div'); inner.style.width = '100%'; outer.appendChild(inner); var widthWithScroll = inner.offsetWidth; outer.parentNode.removeChild(outer); return widthNoScroll - widthWithScroll; } var applyStyles = function(){ overflowIndicatorElement.style.width = (overflowIndicatorElement.offsetWidth - scrollbarWidth) + 'px'; } var recalculate = function(){ overflowIndicatorElement.style.width = '100%'; scrollbarWidth = calculateScrollbarWidth(); } var onResize = function(){ recalculate(); applyStyles(); } var hookEvents = function(){ window.addEventListener('resize', onResize); } var listElement = wrapper.getElementsByClassName('commentsList')[0]; var overflowIndicatorElement = wrapper.getElementsByClassName('overflowIndicator')[0]; var scrollbarWidth = calculateScrollbarWidth(); applyStyles(); hookEvents(); } new CommentsStylizer(document.getElementsByClassName('commentsWrapper')[0]);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>