如何设置水平滚动菜单边缘元素样式，用JavaScript实现画廊概念UI效果？

完全可以实现你提到的效果，核心思路是监听滚动容器的滚动位置，实时计算子元素与容器边缘的距离并动态匹配样式即可，具体落地可以参考以下流程：

• 基础布局搭建：使用CSS实现基础的横向滚动容器，设置overflow-x: auto隐藏超出内容、white-space: nowrap或者flex布局让子元素横向排列，可选添加scroll-snap-type: x mandatory实现滚动吸附效果，关闭默认滚动条提升视觉表现。
• 滚动事件绑定：给滚动容器绑定scroll事件，添加节流函数控制触发频率，避免滚动过程中高频计算导致的性能损耗。
• 动态样式计算：每次滚动事件触发时，遍历所有子元素，分别获取每个元素的左偏移、宽度，以及滚动容器的滚动距离、可视宽度，计算元素左右两端与容器可视区域左右边缘的距离，根据距离值动态调整元素的透明度、缩放比例、模糊度或者蒙版遮罩强度，距离边缘越近对应效果的程度越高。
• 体验优化：给子元素添加transition属性让样式切换更丝滑，也可以监听滚动结束事件做最终状态的校准，避免滚动停顿时样式出现断层。

核心逻辑示例：

const scrollContainer = document.querySelector('.scroll-container')
const menuItems = document.querySelectorAll('.menu-item')

// 节流函数
const throttle = (func, delay) => {
  let timer = null
  return function() {
    if(!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments)
        timer = null
      }, delay)
    }
  }
}

const handleScroll = () => {
  const containerLeft = scrollContainer.scrollLeft
  const containerRight = containerLeft + scrollContainer.clientWidth
  menuItems.forEach(item => {
    const itemLeft = item.offsetLeft
    const itemRight = itemLeft + item.offsetWidth
    // 计算距离左边缘的系数 0~1
    const leftRatio = Math.min(1, Math.max(0, (itemLeft - containerLeft) / 100))
    // 计算距离右边缘的系数 0~1
    const rightRatio = Math.min(1, Math.max(0, (containerRight - itemRight) / 100))
    // 取最小的系数作为最终的样式控制值
    const opacity = Math.min(leftRatio, rightRatio)
    const scale = 0.8 + 0.2 * Math.min(leftRatio, rightRatio)
    item.style.opacity = opacity
    item.style.transform = `scale(${scale})`
  })
}

scrollContainer.addEventListener('scroll', throttle(handleScroll, 16))

你可以根据自己需要的视觉效果调整系数的计算逻辑、样式属性和数值区间，就能还原对应的设计效果。

内容的提问来源于stack exchange，提问作者Nick Moss