基于原生滚动条实现3D水平轮播滑块是否可行？

问题描述 #

我想要实现一款由原生滚动条控制的3D水平轮播滑块，效果为当前展示项尺寸最大，前后相邻项尺寸缩小，其余项隐藏在视野外。我希望通过常规水平滚动条让用户正常滚动操作，但不确定该方案是否可行。以下是我目前的实现代码：

当前CSS代码 #

ul {
  width: 400px;
  list-style: none;
  display: flex;
  overflow: auto;
  gap: 15px;
  padding: 30px;
  margin: 0;

  -ms-overflow-style: none;
  scrollbar-width: none;
}
ul::-webkit-scrollbar { 
  display: none;
}

ul li {
  font-size: 50px;
  flex: 0 0 250px;
  text-align: center;
  line-height: 250px;
  background: #6A90CA;
  color: white;
  text-transform: uppercase;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.30);
}

当前HTML代码 #

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

请问该方案是否可行？还是我需要更换实现思路？

解答 #

你当前的纯CSS方案无法实现目标效果，原因很直接：

• 现有代码只是基础的水平滚动列表，所有列表项尺寸固定，没有根据滚动位置动态调整大小、显示状态的逻辑
• 原生滚动条仅负责控制容器的滚动偏移，无法直接触发子元素的样式变化

但基于原生滚动条的核心思路是可行的，只需补充JavaScript逻辑来联动滚动事件与元素样式，具体调整方向如下：

优化实现思路 #

1. 保留原生滚动交互：移除隐藏滚动条的样式，让用户能正常操作原生滚动条
2. 监听滚动事件：实时获取容器的滚动偏移量，计算每个列表项相对于容器视口的位置
3. 动态调整元素样式：
   • 对处于视口中心的「当前展示项」，设置最大尺寸与最高层级
   • 对前后相邻项，根据距离中心的远近按比例缩小尺寸
   • 距离超过阈值的项，设置为隐藏或缩小到完全移出视野
4. 添加过渡效果：让尺寸、透明度的变化更平滑自然

简化实现示例 #

修改后的CSS

ul {
  width: 400px;
  list-style: none;
  display: flex;
  overflow: auto;
  gap: 15px;
  padding: 30px;
  margin: 0;
  /* 保留原生滚动条 */
}

ul li {
  font-size: 50px;
  flex: 0 0 250px;
  text-align: center;
  line-height: 250px;
  background: #6A90CA;
  color: white;
  text-transform: uppercase;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.30);
  transition: all 0.3s ease;
  position: relative;
}

补充的JavaScript

const scrollContainer = document.querySelector('ul');
const items = document.querySelectorAll('ul li');

// 监听滚动事件
scrollContainer.addEventListener('scroll', updateItemStyles);
// 初始化时先执行一次样式调整
updateItemStyles();

function updateItemStyles() {
  // 计算容器视口的中心位置
  const containerCenter = scrollContainer.scrollLeft + scrollContainer.clientWidth / 2;
  
  items.forEach(item => {
    // 计算当前列表项的中心位置
    const itemCenter = item.offsetLeft + item.offsetWidth / 2;
    // 计算项中心与容器视口中心的距离
    const distance = Math.abs(containerCenter - itemCenter);
    
    // 隐藏距离过远的项
    if (distance > 300) {
      item.style.opacity = '0';
      item.style.transform = 'scale(0.5)';
      item.style.zIndex = '0';
    } else {
      item.style.opacity = '1';
      // 根据距离计算缩放比例，中心位置scale为1，越远越小
      const scale = Math.max(0.7, 1 - distance / 600);
      item.style.transform = `scale(${scale})`;
      // 中心项设置最高层级
      item.style.zIndex = distance < 50 ? '10' : '1';
    }
  });
}

总结 #

基于原生滚动条的方案完全可行，但必须结合JavaScript实现动态样式调整，纯CSS无法满足你的需求。上述示例可以作为基础框架，你可以根据需求进一步调整阈值、缩放比例、过渡动画等参数。

内容的提问来源于stack exchange，提问作者Simon Trichereau