gallery-container">

``` CSS: ```css .gallery-container { display: flex; justify-content: center; } .thumbnails { display: flex; flex-direction: column; gap: 8px; } .thumbnails img { width: 40px; height: 40px; cursor: pointer; } .scrollbar { width: 1px; height: 720px; background: #ccc; display: block; margin: 0 0 0 8px; } .thumb { width: 1px; position: absolute; height: 0; background: #000; } .slides { margin: 0 16px; display: grid; grid-auto-flow: row; gap: 1rem; width: calc(540px + 1rem); padding: 0 0.25rem; height: 720px; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scrollbar-width: none; } .slides > div { scroll-snap-align: start; } .slides img { width: 540px; object-fit: contain; } .slides::-webkit-scrollbar { display: none; } ``` JavaScript: ```js const slideGallery = document.querySelector(".slides"); const slides = slideGallery.querySelectorAll("div"); const scrollbarThumb = document.querySelector(".thumb"); const slideCount = slides.length; const slideHeight = 720; const marginTop = 16; const scrollThumb = () => { const index = Math.floor(slideGallery.scrollTop / slideHeight); scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`; }; const scrollToElement = (el) => { const index = parseInt(el.dataset.id, 10); slideGallery.scrollTo(0, index * slideHeight + marginTop); }; document.querySelector(".thumbnails").innerHTML += [...slides] .map( (slide, i) => `

` ) .join(""); document.querySelectorAll(".thumbnails img").forEach((el) => { el.addEventListener("click", () => scrollToElement(el)); }); slideGallery.addEventListener("scroll", (e) => scrollThumb()); scrollThumb(); ``` 右下隅にある「Go Live」をクリックして、ポート 8080 でウェブサービスを起動してください。その後、**Web 8080** タブを更新すると、ウェブページをプレビューできます。