Question

是我触摸页面之前的样子。当我向下、向上或向一侧滚动太快时，它会在页面外显示白色区域，看起来像或。

导航栏.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>
  )
}

Feed.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;
}

App.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;

有人可以告诉我要调整什么才能使无论我滚动多快都保持原位吗？

Answer 1

在属性 overscroll-behavior 中添加了现代浏览器。为了阻止浏览器弹跳，将 overscroll-behvaior: none 属性添加到您的 html

CSS

html {
  overscroll-behavior: none
}

为什么滚动时显示空白？

1 个答案: