css - 为什么滚动时显示空白?
问题描述
是我的页面在我触摸它之前的样子。当我向下、向上或向一侧滚动速度过快时,它会在页面外部显示看起来像或的空白区域。
导航栏.jsx
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<section className="search-bar">
<div className="row">
<div className="col-lg mx-auto">
<form>
<div>
<div className="input-group">
<div className="homeBtn">
<h3>VIZZEY</h3>
</div>
<input type="search" placeholder="Search" className="form-control" />
<button className="searchBtn">
<FaSearch />
</button>
<div className="input-group-append buttons">
<div className="icon">
<button className="icon-btn">
<h4><FiMail /></h4>
</button>
</div>
<div className="icon">
<button className="icon-btn">
<h4><FaPlus /></h4>
</button>
</div>
<div className="icon">
<button className="icon-btn">
<h4><AiTwotoneBell /></h4>
</button>
</div>
<div className="icon">
<button className="icon-btn">
<h4><BsFillPersonFill /></h4>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
)
}
export default Navbar;
导航栏.css
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
}
form {
padding-top: 10px;
}
.icon {
padding-right: 20px;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}
.form-control:focus-within {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
outline: none;
}
.profiledropdown-item {
width: 200px;
height: 100px;
margin-left: 20px;
border: 3px solid rgb(255, 0, 0);
background-color: #ff0000;
display: flex;
}
.search-bar {
width: auto;
border: solid #333333;
background-color: #333333;
padding-bottom: 10px;
top: 0;
position: sticky;
z-index: 9000;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
outline-color: chocolate;
border: none;
}
.homeBtn {
padding-right: 60px;
padding-left: 50px;
color: #00ce7f;
}
.buttons {
padding-left: 55px;
padding-right: 15px;
}
button:focus, button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
Feed.js
import React from 'react';
import './Feed.css'
import Card from '../components/Card';
function Feed() {
return (
<div className="background">
<div className="container">
<div className="row">
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
</div>
</div>
</div>
)
}
饲料.css
.background {
background-color: rgb(73, 74, 75);
height: auto;
width: 100vw;
}
.container {
background-color: rgb(97, 97, 97);
border-width: 100px;
height: auto;
width: 100vw;
}
.vids {
padding-left: 10px;
}
应用程序.js
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Navbar from './components/Navbar';
import Feed from './pages/Feed'
import './App.css'
function App() {
return (
<div>
<Navbar/>
<Feed/>
</div>
);
}
export default App;
有人可以告诉我,无论我滚动多快,要调整什么以使一切都保持原位吗?
解决方案
在属性 overscroll-behavior 中添加的现代浏览器。为了阻止浏览器弹跳,将 overscroll-behvaior: none 属性添加到您的 html
CSS
html {
overscroll-behavior: none
}
推荐阅读
- c++ - 我想将 actionlistener 设置为我在 qt 小部件中动态创建的按钮
- azure - 监控 Azure 存储帐户中每个容器的大小/事务/带宽使用情况
- javascript - sm 屏幕上的卡片 bootstrap4 相互骑行
- binary - 分类问题,只有一类的标签
- angular - 在单元测试中模拟 NgControl 以访问验证器
- android - Android 设备收不到推送通知
- json - 使用 grep 函数从 AWS 证书列表中提取键值
- tsql - 仅将“PhoneNumber”从一列移动到同一表中的另一列
- c++ - 如何在makefile的同一列中打印{done}
- windows - 如何在 Windows 批处理中使用 for 循环来执行命令 n 次(给定 n 次)?