React中实现Hover显示滚动条且内容不偏移的问题求助

问题核心是：滚动条默认会占用容器水平空间，当hover时overflow-y从hidden切换到scroll，容器内可用宽度突然减少，导致内容换行或移位。

下面提供两种可靠的解决方法：

方法一：使用scrollbar-gutter属性（推荐，现代浏览器支持） #

scrollbar-gutter: stable会为滚动条预留固定空间，无论滚动条是否显示，该空间都存在。hover时滚动条仅填充预留空间，不会挤压内容。

修改后的Styled Components代码：

import styled from 'styled-components';

const Main = styled.div`
  position: absolute;
  top: 100px;
  left: 100px;
`;

const Wrapper = styled.div`
  border: 1px solid red;
  padding: 6px;
  border-radius: 8px;
  position: relative;
  background-color: white;
`;

const Content = styled.div`
  color: blue;
  font-size: 16px;
  width: 192px;
  min-height: 56px;
  max-height: 192px;
  overflow: hidden;
  overflow-y: hidden;
  /* 关键属性：预留滚动条空间 */
  scrollbar-gutter: stable;

  &:hover {
    overflow-y: scroll;
  }

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 8px;
  }

  &::-webkit-scrollbar-thumb {
    width: 4px;
    background: yellow;
    border-radius: 28px;
    border: none;
    background-clip: content-box;
  }
`;

// 使用示例
const App = () => (
  <Main>
    <Wrapper>
      <Content>
        testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected testing a note which will wrap up I dont know what is expected
      </Content>
    </Wrapper>
  </Main>
);

方法二：手动预留padding空间（兼容旧浏览器） #

如果需要支持不兼容scrollbar-gutter的旧浏览器，可给内容容器设置等于滚动条宽度的padding-right，让滚动条显示在padding区域内，不挤压内容：

修改后的Content组件样式：

const Content = styled.div`
  color: blue;
  font-size: 16px;
  width: 192px;
  min-height: 56px;
  max-height: 192px;
  overflow: hidden;
  overflow-y: hidden;
  /* 预留等于滚动条宽度的padding */
  padding-right: 4px;

  &:hover {
    overflow-y: scroll;
  }

  /* 滚动条样式保持不变 */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 8px;
  }

  &::-webkit-scrollbar-thumb {
    width: 4px;
    background: yellow;
    border-radius: 28px;
    border: none;
    background-clip: content-box;
  }
`;

原理说明 #

• 方法一中scrollbar-gutter: stable让容器总宽度始终包含滚动条所需的4px空间，内容区域宽度固定，hover时不会变化。
• 方法二中padding-right: 4px把内容区域实际可用宽度减少4px，滚动条出现时会占用这个padding空间，内容本身布局不受影响。

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