HTML-100VW导航栏应用Overflow-Y时重叠滚动条-堆栈溢出

顺晟科技

2022-10-18 14:11:06

我在设计100VW导航栏时遇到了一点麻烦，因为页面部分有100VH.我还在页面中加入了“捕捉”效果，当用户滚动时，它会捕捉到页面。主要的问题是导航栏与滚动条重叠，我不知道如何修复它。我希望导航栏从页面顶部开始，而不是在导航下方。看起来，如果我删除app.CSS内容中的overflow-y：scroll，滚动条将正常显示，但我失去了滚动效果。有人能告诉我我做错了什么吗？谢了

应用程序JS

import './App.css';
import { Navbar } from './components/Navbar';
import { Body } from './components/Body'

function App() {
  return (
    <>
      <div className="header">
          <Navbar></Navbar>
      </div>
      <div className="content">
          <Body></Body>
      </div>
    </>
  );
}

export default App;

应用程序CSS

<代码>*{font-family：' Nunito Sans '，无衬线字体；}迪夫{填充：0；保证金：0；框大小：border-box；}.页眉{显示：块；}.内容{Scroll-Snap-Type：Y必填；Overflow-Y：滚动；高度：100VH；}

导航栏

*{
  font-family: 'Nunito Sans', sans-serif;
}
div{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.header{
  display: block;
}
.content{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

导航栏CSS

<代码>*{填充：0；保证金：0；框大小：border-box；}.导航栏{背景颜色：#343434；显示：Flex；正当-内容：空间-周围；align-items：居中；位置：固定；宽度：100%；最小高度：8VH；}

身体

import React from 'react'
import '../styles/Navbar.css'
export const Navbar = () => {

    return (
        <>
            <div className = "navbar"></div>
        </>
    )
}

正文CSS

<代码>*{保证金：0；填充：0；框大小：border-box；}段{显示：Flex；Justify-content：中心；align-items：居中；scroll-snap-align：开始；颜色：白色；填料-顶部：8VH；高度：100VH；}.一个{背景色：RGB（36，164，138）；}.两个{背景色：RGB（211，79，79）；}.三个{背景色：RGB（67，91，175）；}.四个{背景色：LightSalmon；}.五{背景色：LightSkyBlue；}

顺晟科技：

上一篇：JavaScript-如何让一个有角下一篇：JavaScript-访问函数中的影

网站建设

Html

HTML-100VW导航栏应用Overflow-Y时重叠滚动条-堆栈溢出