时间戳

首页 > 解决方案 > 当组件离开页面时反应整个页面滚动条

javascript - 当组件离开页面时反应整个页面滚动条

问题描述

我有一个这样的应用程序：

在此处输入图像描述

正如您所看到的，中间组件继续向下超出页面，这就是为什么我需要一个滚动条来向下滚动到它。但是如果我直接将它附加在中间组件上，我只能让它工作，但我想要一个常规的整页滚动条。

这是我的 app.js

import React, { Component } from 'react';
import OysterView from './components/OysterView.js'
import './uikit/uikit.css';
import './App.css';
import logo from './uikit/assets/images/hrm-white.svg';

class App extends Component {
  render() {
    return (
    <div className="App">      
      <div className="App-header">
        <header>
          <img src={logo} className="App-logo" alt="HRM"/>
        </header>
      </div>
      <div className="OysterView">
       <OysterView />
       </div>
    </div>
    );
  }
}

export default App;

我尝试将其设置在不同的位置，但它无法识别组件超出范围，因此无法向下滚动组件是超出范围<OysterView />的组件，因此我在 CSS 中尝试过

  .App {
  overflow-y: scroll;
  background-color: #fafafa;
 position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -2
}

也试过这个：

html{
height: 100%;
overflow-y: scroll;
margin: 0;
padding: 0;
}

这根本没有添加任何东西，这可能是因为 .App 没有高度，但是如果我添加高度，其余的内容就会被向下推，所以它什么也解决不了。我也尝试将它添加到 index.css html 中，这给了我一个滚动条，但它不能向下滚动。所以我在这里没有想法。我应该如何攻击这个？.App 上的 z-index？

标签： javascripthtmlcssreactjs

解决方案

您必须滚动组件本身，只需使其容器全屏，以便滚动条位于窗口的右侧。

  .modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba( 0, 0, 0, .5 );
    overflow-y: scroll;
  }
  
  .modal-content {
      background: red;
      margin: 20%;
      height: 2000px;
  }
Page content
<div class="modal-container">
  <div class="modal-content">
    Modal content
  </div>
</div>

推荐阅读