Bootstrap 4 Scrollspy в React не работает

Я пытаюсь заставить Bootstrap 4 Scrollspy работать с липкой панелью навигации в React. Панель навигации не отображается на целевой странице, и когда пользователь прокручивает страницу вниз, панель навигации остается в верхней части экрана. Эта часть работает, но я не могу заставить работать прокрутку. Я хотел бы использовать Bootstrap 4 Scrollspy, если это возможно, но если это не так, я открыт для использования другой библиотеки. Какие-либо предложения?

Вот кодекс

index.js

import React, { Component } from 'react'
import { render } from 'react-dom'
import './style.scss'

class App extends Component {
  render() {
    return (
      <div className='App' data-spy="scroll" data-target="#myNavbar" data-offset="0">
            <section id='section1' className='section1'>
                <div className='home__background'>
                    <div className='dark-overlay'>
            <div className='home__background__content'><h1 className='text-white'>Welcome to my site</h1>
            <a href='#section2'className='btn btn-success'>Go To Section2</a></div>
                    </div>
                </div>
            </section>
      <nav id='myNavbar'className='navbar user-nav sticky-top'>
                    <div className='user-nav__links'>
                        <a href='#section1' className='user-nav__links__link'>
                            Home
                        </a>
                        <a href='#section2' className='user-nav__links__link'>
                            About
                        </a>
                        <a href='#section3' className='user-nav__links__link'>
                            Projects
                        </a>
                        <a href='#section4' className='user-nav__links__link'>
                            Blog
                        </a>
                        <a href='#section5' className='user-nav__links__link'>
                            Contact
                        </a>
                    </div>
                </nav>
      <section id='section2' className='section2'>
      <p>section2</p>
      </section>
      <section id='section3' className='section3'>
      <p>section3</p>
      </section>
      <section id='section4' className='section4'>
      <p>section4</p>
      </section>
      <section id='section5' className='section5'>
      <p>section5</p>
      </section>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));


styles.scss


* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    font-size: 62.5%; // 1 rem = 10px, 10px/16px = 62.5%
}

// Attempt to get scrollspy working
// .App {
//   position:relative;
//   overflow-y: scroll;
//   height: 100%;
// }

.home {
    &__background {
        height: 100vh;
        background-image: url('https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1391&q=80');
        background-size: cover;
        overflow: hidden;

        &__content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            width: 40%;
            height: 30%;

        }
    }
}

.dark-overlay {
    background-color: rgba(black, 0.65);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.user-nav {
    width: 100%;
    background-color: blue;
    text-transform: uppercase;
    padding: 2rem;
    margin-right: 2rem;

    a {
        text-decoration: none;
    }

    &__links {
        height: 100%;

        &__link {
            height: 100%;
            font-size: 1.7rem;
            color: white;
            margin-right: 5rem;
            line-height: 100%;

            &:hover {
                color: lightblue;
            }
        }
    }

    .active {
        color: orangered;
    }
}

.section2 {
  height: 400px;
}

.section3 {
  height: 500px;
}

.section4 {
  height: 500px;
}

.section5 {
  height: 800px;
}

.text-white {
  color:white;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

package.json

{
  "name": "react",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "node-sass": "^4.13.0",
    "popper.js": "^1.16.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

Всего 1 ответ


я не знаю, работает ли начальная прокрутка прокрутки или нет, но я использую другую библиотеку

https://www.npmjs.com/package/react-scrollable-anchor


Есть идеи?

10000