使用React Slick后页面右侧出现异常纵向空白如何解决

页面右侧纵向贯穿空白、整体左偏是react-slick默认样式导致的横向溢出问题：

• react-slick渲染时会自动生成.slick-track内层容器，这个容器的默认宽度是所有轮播项宽度的总和，远大于视口宽度
• 外层的.slick-list、.slick-slider容器默认没有设置横向溢出隐藏，浏览器会把这部分超出的宽度计入页面总滚动宽度，直接撑出多余的横向空白区域
• Chrome、Opera使用的Blink渲染引擎对这类无裁剪溢出的宽度计算规则更严格，所以问题表现比其他浏览器更明显
  你之前排查时没找到额外padding/margin是正常的，这个偏移根本不是内外边距导致的。

• 给slick相关类强制设置100%/100vw宽度加!important：没有命中问题根源，强制给轨道容器设满宽会直接挤坏轮播的横向排列布局
• 给body设置margin:0; padding:0：问题和body默认边距完全无关
• 调整Slider组件配置参数：这个问题是slick默认CSS的固有缺陷，和轮播显示数量、滚动步长等逻辑配置没有关系

在全局CSS中添加以下代码即可，不需要修改组件逻辑，也不会影响轮播的正常滑动、跳转等交互功能：

/* 裁剪slick容器横向溢出，消除页面右侧空白 */
.slick-slider,
.slick-list {
  overflow-x: hidden !important;
}

/* 兜底兼容：如果上述代码加完仍有极少量偏移，补充这两行 */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

加完样式后强制刷新浏览器清掉缓存即可生效，右侧空白会完全消失，页面不再出现偏移。

内容的提问来源于stack exchange，提问作者Steen Toons