.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
<div class="scrollbox">
<ul>
<li>Not enough content to scroll</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="scrollbox">
<ul>
<li>Ah! Scroll below!</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>
Element może zostać przelany pionowo, poziomo lub w obu przypadkach. Ta funkcja zwróci wartość logiczną, jeśli element DOM jest przepełniony:
Pokaż fragment kodu
Przykład ES6:
źródło
$("#element").overflown()
):$.fn.overflown=function(){var e=this[0];return e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth;}
element.addEventListener ("overflow", () => log( "overflow" ), false);
Odniesienie: zdarzenie przepełnieniaPorównywanie
element.scrollHeight
doelement.clientHeight
powinien wykonać zadanie.Poniżej znajdują się obrazy z MDN wyjaśniające elementy Element.scrollHeight i Element.clientHeight.
źródło
Zrobiłem wieloczęściowy kodepen demonstrujący powyższe odpowiedzi (np. Używając ukrytego przepełnienia i wysokości), ale także tego, jak możesz rozwinąć / zwinąć przepełnione elementy
Przykład 1: https://codepen.io/Kagerjay/pen/rraKLB (Naprawdę prosty przykład, bez javascript, tylko po to, aby wyciąć przepełnione elementy)
Przykład 2: https://codepen.io/Kagerjay/pen/LBErJL (Obsługa pojedynczego zdarzenia pokazuje więcej / niewidoczne dla przepełnionych elementów)
Przykład 3: https://codepen.io/Kagerjay/pen/MBYBoJ (Obsługa wielu zdarzeń na wielu pokazuje więcej / pokazuje mniej na przepełnionych elementach)
Mam załączeniu przykład 3 poniżej, jak również , używam Jade / Pug więc to może być odrobinę rozwlekły. Proponuję zapoznać się z kodami, które ułatwiłem zrozumienie.
źródło
Czy coś takiego: http://jsfiddle.net/Skooljester/jWRRA/1/ działa? Po prostu sprawdza wysokość zawartości i porównuje ją z wysokością kontenera. Jeśli jest większy, niż możesz umieścić w kodzie, aby dołączyć przycisk „Pokaż więcej”.
Aktualizacja: dodano kod, aby utworzyć przycisk „Pokaż więcej” u góry kontenera.
źródło
Jeśli używasz jQuery, możesz spróbować sztuczki: utwórz zewnętrzny element div z
overflow: hidden
i wewnętrzny element div z zawartością. Następnie użyj.height()
funkcji, aby sprawdzić, czy wysokość wewnętrznego elementu div jest większa niż wysokość zewnętrznego elementu div. Nie jestem pewien, czy to zadziała, ale spróbuj.źródło
użyj js, aby sprawdzić, czy dziecko
offsetHeight
ma więcej niż rodziców .. jeśli tak, spraw, aby rodzice przepełnili to,scroll/hidden/auto
co chcesz, a takżedisplay:block
na więcej div ..źródło
Możesz sprawdzić granice względem elementu macierzystego odsunięcia.
Jeśli przekażesz to element, powie ci, czy jego granice są całkowicie wewnątrz kontenera i domyślnie przestawi element nadrzędny przesunięcia elementu, jeśli nie zostanie podany wyraźny kontener. To używa
źródło
Kolejną kwestią, którą należy rozważyć, jest niedostępność JS. Pomyśl o stopniowym zaklęciu lub wdzięcznej degradacji. Sugerowałbym:
źródło
Oto skrzypce do określenia, czy element został przepełniony za pomocą opakowującego elementu div z przepełnieniem: hidden i JQuery height (), aby zmierzyć różnicę między opakowaniem a wewnętrznym elementem div zawartości.
Źródło: Framework i rozszerzenia na jsfiddle.net
źródło
To jest rozwiązanie jQuery, które zadziałało dla mnie.
clientWidth
itp. nie działały.Jeśli to nie zadziała, upewnij się, że element nadrzędny ma żądaną szerokość (osobiście musiałem użyć
parent().parent())
.position
Jest względem elementu nadrzędnego. Uwzględniłem również,extra_width
ponieważ moje elementy („tagi”) zawierają obrazy, których load, ale podczas wywołania funkcji mają zerową szerokość, co psuje obliczenia.Aby to obejść, używam następującego kodu wywołującego:Mam nadzieję że to pomoże.
źródło
To zadziałało dla mnie. Dziękuję Ci.
źródło
Alternatywą dla odpowiedzi w jquery jest użycie klawisza [0] w celu uzyskania dostępu do surowego elementu, na przykład:
źródło
Rozszerzyłem Element ze względu na enkapsulację. Z micnic odpowiedzi.
Użyj tego w ten sposób
źródło