react中引入better-scroll，横向滚动失效¿

Question

事情的经过，是这样的：在react中引入better-scroll并封装成组件：

return (
    <ScrollContainer ref={scrollContainerRef}>{props.children}</ScrollContainer>
);

其中，通过props控制其滚动方向：

  scrollX: direction === "horizontal",
  scrollY: direction === "vertical"

这并没有什么问题，于是我在一个组件中尝试使用它：

return (
  <Content>
    <Scroll direction="vertical" className="list" onScroll={forceCheck}>
      <div>
        <Slider bannerList={bannerListJS}></Slider>
        <RecommendList recommendList={recommendListJS}></RecommendList>
      </div>
    </Scroll>
    {enterLoading ? <Loading></Loading> : null}
  </Content>
);

其中Conten是一个样式组件：

import styled from "styled-components";
import style  from "../../assets/global-style";

export const Content = styled.div`
    position: fixed;
    top: 90px;
    bottom: 0;
    width: 100%;
    .before {
        position: absolute;
        top: -300px;
        width: 100%;
        height: 400px;
        background: ${style["theme-color"]};
    }
`;

成功了，它表现得很棒！

于是我兴奋的打算再次使用它，向direction传入“horizontal”，并亲切地称之为“Horizon”：

return (
  <Scroll direction={"horizontal"}>
    <div ref={Category}>
      <List>
        <span>{title}</span>
        {
          list.map(item => {
            return (
              <ListItem
                key={item.key}
                className={`${oldVal === item.key ? "selected" : ""}`}
                onClick={() => handleClick(item)}
              >
                {item.name}
              </ListItem>
            );
          })
        }
      </List>
    </div>
  </Scroll>
);

诶？好像最外层少了点什么，于是：

return (
  <NavContainer>
    <Horizon
      list={categoryTypes}
      title={"分类（默认热门）："}
      handleClick={val => handleUpdateCategory(val)}
      oldVal={category}
    />
    <Horizon
      list={alphaTypes}
      title={"首字母："}
      handleClick={val => handleUpdateAlpha(val)}
      oldVal={alpha}
    />
  </NavContainer>
);

我在调用它的地方，给他加上一个框框，同样这个框框是个样式组件：

export const NavContainer  = styled.div`
    position: fixed;
    top: 95px;
    padding: 5px;
`;

我满心欢喜的打运行我的项目，哦豁，它不管用了！

求大佬抬一手。。o(╥﹏╥)o

Answer 1

好了，通过直觉，这不是逻辑的问题，然后开始找css的问题。

嗯。很气，具体的找错过程就不说了，说一下蠢如我犯的问题吧，引以为戒：

嗯，去掉就可以惹，o(╥﹏╥)o