一定数だけ表示するリスト
html、css、jsで作ったシンプルなお知らせリストです。data-show="3"の値を変更すれば初期表示のリスト数を制御できます。MOREを押した時の動きはgsapで行なっています。
初期表示リスト数を制御する
<ul class="topics-list" id="topics-list" data-show="3">
<!-- ↑data-show="3"の値を変更することで初期表示数を制御できる -->
<li>
<div>
<p class="topics-label">ニュース</p>
<a href="#" class="topics-text">お知らせダミー</a>
</div>
</li>
... 以下略 /**
* リストの高さを調整する
*/
function showList() {
listHeight = 0;
// data-showの値を取得
const targetData = Number(topicsList.dataset.show);
const targetLi = topicsList.querySelectorAll("li");
// data-showの値分だけループ処理
for (let i = 0; i < targetData; i++) {
// 高さを取得していく
listHeight = listHeight + targetLi[i].offsetHeight;
// marginは取得できないので手動で10pxを追加
listHeight = listHeight + 10;
}
// リストが開いていない状態の時
if (!topicsList.classList.contains("is-show")) {
topicsList.style.height = `${listHeight}px`;
}
}ブラウザリサイズに耐えられるように
ブラウザの横幅が変更された時、高さを変更しないと突き抜けたりしてしまうため、resizeObserverを使いブラウザ横幅を監視しています。
// resizeObserverでブラウザ横幅を監視
let widthStock = 0;
const resizeObserver = new ResizeObserver((entries) => {
// 今回は監視する要素は１つなので[0]で指定する
const width = entries[0].contentRect.width;
if (widthStock === 0) {
} else {
if (widthStock === width) {
return;
} else {
widthStock = width;
// リストの高さを調整する
showList();
}
}
});
resizeObserver.observe(topicsList);
