这个原生JavaScript实现的颜色过滤器存在什么问题？

• 偏移问题和JS筛选逻辑无关，本质是垂直滚动条显隐切换导致的页面宽度变化：
  • 切换到「全部」分类时，所有7个颜色div都渲染，内容高度超过浏览器视口，触发垂直滚动条显示，滚动条会占据10-15px的页面水平空间
  • 切换到单个颜色分类时，仅渲染1个div，内容高度小于视口，滚动条消失，页面可用水平宽度增加
  • 如果外层.container设置了居中对齐（比如margin: 0 auto），容器就会随着页面可用宽度变化出现偏移。同颜色分类切换时始终只显示1个div，滚动条状态不变，因此不会出现偏移。

任选以下一种方案即可解决：

1. 全局强制显示垂直滚动条
   给页面根标签设置固定显示滚动条，彻底避免显隐切换：

html {
  overflow-y: scroll;
}

2. 滚动条悬浮渲染
   设置滚动条悬浮在内容上方，不占据页面宽度，兼容Chrome、Edge等现代浏览器：

html {
  overflow-y: overlay;
}

3. 内部容器滚动限制
   给颜色展示区域设置固定高度，把滚动限制在容器内部，不影响外层页面滚动条：

.colors {
  height: 500px; /* 可根据实际布局调整数值 */
  overflow-y: auto;
}

现有JS代码做了两次myColors遍历，可以合并为一次减少DOM操作：

let myList   = document.querySelectorAll('ul li');
let myColors = document.querySelectorAll('.colors div');

myList.forEach(item => {
  item.onclick = function() {
    const theTarget = this.dataset.target;
    myColors.forEach(color => {
      color.style.display = (theTarget === 'all' || theTarget === color.dataset.color) ? 'block' : 'none';
    })
  }
});

内容的提问来源于stack exchange，提问作者Hayeddine Kelious