CSS/HTML-内容前的滚动标题 [英] CSS/HTML - Scroll Header before content

问题描述

我试图弄清楚是否可以仅隐藏导航栏的上部.参见下面的图(绿色标记区域).这应该模仿导航栏的行为，例如whatsapp-app.

I try to figure out if it is possible to hide only the upper part of the nav-bar. See Img below (green marked area). This should mimic the navbar behaviour like the whatsapp-app.

在此用例中，我正在使用 material-ui .在我的实现中，仅当滚动位置为<时，应用程序栏才会再次扩展. 48px .在.gif文件(请参见下文)上，它会在每次向上滚动事件时扩展.看起来，应用程序栏仅会滚动直到到达固定位置.之后，其余内容开始滚动.

I am using material-ui for this use-case. With my implementation the app-bar only extends again if the scroll position is < 48px. On the .gif-file (see below) it extends on every scroll up event. It also looks like the app-bar scrolls only first until it reaches position fixed. After then the rest of the content begins to scroll.

我实现了概念验证，但效果不尽如人意: stackblitz

I implemented a proof-of-concept, but it is not quite working as expected: stackblitz

我的方法如下:

export default function TabBar() {
  const [value, setValue] = React.useState(0);
  const [yOffset, setYOffset] = React.useState(0);

  function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
    setValue(newValue);
  }

  function transitionY() {
    const transitionYthreshold = 48;
    return Math.min(transitionYthreshold, yOffset);
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  });

  function handleScroll() {
    setYOffset(window.pageYOffset);
  }

  return (
    <React.Fragment>
      <AppBar
        position="sticky"
        color="default"
        style={{
          transition: 'all 0.1s',
          transform: `translateY(-${transitionY()}px)`
        }}
      >
        <Toolbar style={{ minHeight: '48px' }}>
          <div style={{ width: '30px', marginRight: '1em' }} />
          <span style={{ fontWeight: 'bold', fontSize: '20px', verticalAlign: 'super' }}>Help-Educate</span>
        </Toolbar>
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="fullWidth"
        >
          <Tab label="Home"  {...a11yProps(0)}/>
          <Tab label="Donations"  {...a11yProps(1)}/>
          <Tab label="About Us"  {...a11yProps(2)}/>
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        <Container>
          {**SomeSuperLongText**}
        </Container>
      </TabPanel>
      <TabPanel value={value} index={1}>
         {**SomeSuperLongText**}
      </TabPanel>
      <TabPanel value={value} index={2}>
         {**SomeSuperLongText**}
      </TabPanel>
    </React.Fragment>
  );
}

我创建了一个gif，其行为应如下所示: 投递链接

I created a gif how the behaviour should look like: dropbox-link

推荐答案

这是我的解决方案: https://stackblitz.com/edit/react-ts-azrqoy

我正在使带有文本的容器可滚动(我已使滚动条保持可见状态，因此您可以更好地看到发生了什么，但是可以使用css轻松删除它们)

I am making the Container with text scrollable (I have left the scrollbars visible, so you can see better what happens, but you can easily remove them with css)

<Container
          style={{
          top:48,
          paddingTop:48,
          bottom: - 48,
          scrollTop: yOffset - transitionY(),
          pointerEvents: transitionY()<48?"none":"auto"
        }} className="cont" onScroll={handleInsideScroll}>

诀窍是，如果希望手指/滚动滚动页面滚动，请停止容器的pointer-events，如果要向内滚动，则将其启用.因此，这几乎是CSS解决方案，我个人更喜欢这些而不是使用JS推送值-它们更平滑，更优化.

The trick is to stop pointer-events for the container if you want fingers/scrolling to move the page scroll and enable it back if you want to scroll inside. So this is pretty much CSS solution and I personally prefer these more than pushing values with JS - they are smoother and more optimised.

有两个问题: -当发生指针事件切换时，您必须移动鼠标(1px)才能再次进行滚动操作(如果您ref并手动更改containerRef.style.pointerEvents而不是设置状态和重新渲染组件，则可能可以解决此问题. -该脚本的逻辑不能像gif动画那样完全处理向上滚动，您可能必须检测向上滚动并停止指针事件，直到条显示为止

There are two problems: - when the pointer-events switch happens, you have to move your mouse (1px) to have the scroll work again (This can probably be fixed if you ref and manually change containerRef.style.pointerEvents instead of setting states and rerendering components. - the logic of this script doesn't handle scrolling up exactly like your gif animation, you will probably have to detect scrolling up and stop the pointer-events until the bar shows

我从未在TypeScript中写过一行，所以我无法真正尝试所需的一切.

I have never written a line in TypeScript, so I couldn't really try everything I wanted.

这篇关于CSS/HTML-内容前的滚动标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！