40.带水平滚动的图片库

带水平滚动的图片库

创建一个可水平滚动的图片库。

• 使用 position: absolute 将 .thumbnails 定位在容器的底部。
• 使用 scroll-snap-type: x mandatory 和 overscroll-behavior-x: contain 在水平滚动时创建贴合效果。使用 scroll-snap-align: start 将元素贴合到容器的开始位置。
• 使用 scrollbar-width: none 和设置伪元素 ::-webkit-scrollbar 的 display: none 来隐藏滚动条。
• 使用 Element.scrollTo() 定义一个 scrollToElement 函数,将图库滚动到给定的项目。
• 使用 Array.prototype.map() 和 Array.prototype.join() 填充 .thumbnails 元素。给每个缩略图一个带有图片索引的 data-id 属性。
• 使用 Document.querySelectorAll() 获取所有缩略图元素。使用 Array.prototype.forEach() 通过 EventTar