無法使用`window.scrollY`或`window.pageYOffset`獲取滾動位置

Question

問題

我需要獲取滾動位置，以便可以根據其切換工具提示位置。

這是我的工具提示的外觀：

但是當我向下滾動時，我希望它向下切換，但是現在沒有發生期望的事情：向上切換

解決問題

我嘗試使用window.scrollY和window.pageYOffset獲取滾動位置，但是無論我滾動多少，它都將其記錄為0 。

可能的解決方案

我嘗試參考此問題，但刪除了height: 100%屬性對我不起作用。

碼

import React, { Component } from 'react'
import ReactMarkdown from 'react-markdown'
import styled from 'styled-components'

import glossary from '../Documentation/glossary'

class Tooltip extends Component {
  state = {
    hover: false,
    timeout: null,
    width: 400,
    margin: -70,
    pointMargin: -15
  }

  tooltipWidthEval = () => {
    const markdownBody = document.getElementsByClassName('markdown-body')[0]
    const maxWidth = markdownBody.offsetLeft + markdownBody.clientWidth
    const container = document.getElementsByClassName('tooltip-container')[0]
    const tooltipWidth = container.offsetLeft + this.state.width
    if (tooltipWidth > maxWidth) {
      this.setState({
        margin: -340,
        pointMargin: 260
      })
    } else {
      this.setState({
        margin: -70,
        pointMargin: -15
      })
    }
  }

  hoverIn = () => {
    console.log(window.scrollY)
    if (this.state.interval) {
      clearTimeout(this.state.interval)
      this.setState(
        {
          interval: null,
          hover: true
        },
        this.tooltipWidthEval
      )
    } else {
      this.setState(
        {
          hover: true
        },
        this.tooltipWidthEval
      )
    }
  }

  hoverOut = () => {
    this.setState({
      interval: setTimeout(() => {
        this.setState({
          hover: false
        })
      }, 100)
    })
  }

  render() {
    const { text } = this.props
    let header = ''
    let description = ''
    glossary.contents.forEach(glossaryItem => {
      if (glossaryItem.match.includes(text)) {
        header = glossaryItem.name
        description = glossaryItem.desc
      }
    })
    return (
      <>
        <HighlightedText
          onMouseOver={this.hoverIn}
          onMouseLeave={this.hoverOut}
        >
          {text}
        </HighlightedText>
        {this.state.hover && (
          <TooltipContainer
            className="tooltip-container"
            onMouseOver={this.hoverIn}
            onMouseLeave={this.hoverOut}
          >
            <TooltipText
              margin={this.state.margin}
              width={this.state.width}
              pointMargin={this.state.pointMargin}
            >
              <div className="header">{header}</div>
              <ReactMarkdown source={description} />
            </TooltipText>
          </TooltipContainer>
        )}
      </>
    )
  }
}

const HighlightedText = styled.span`
  border-bottom: 1px black dotted;
`

const TooltipContainer = styled.div`
  position: absolute;
  display: inline-block;
  z-index: 300000000;
  background-color: white;
`

const TooltipText = styled.div`
  padding: 8px 10px;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  background-color: white;
  position: absolute;
  z-index: 1;
  bottom: 90%;
  margin-left: ${props => props.margin || -70}px;
  width: ${props => props.width || 400}px;

  &:after,
  &:before {
    content: '';
    position: absolute;
    top: 100%;
    border-style: solid;
    margin-left: ${props => props.pointMargin || -15}px;
  }

  &:after {
    left: 10%;
    border-width: 10px;
    border-color: white transparent transparent transparent;
  }
  &:before {
    left: 10%;
    border-width: 11px;
    border-color: #d1d5da transparent transparent transparent;
  }

  .header {
    font-size: 1.3em;
    font-weight: bold;
  }
`

export default Tooltip

附言：我想如果僅使用javascript解決問題，因為該項目不使用jQuery 。

Answer 1

如果我做對了，實際上是在滾動一個容器（例如div或類似的東西），而不是頁面本身。 在這種情況下，您可以使用前文注釋中提到的scrollTop獲取滾動偏移量。

但是您需要獲取要滾動的元素的屬性（ 不是 window.scrollTop ）。 因此，如果您的內容在div中，則需要從該元素獲取scrollTop屬性。 這是一個工作示例，其中我從元素獲取滾動位置：

 const container = document.getElementById('container'); container.addEventListener('scroll', () => { console.log(container.scrollTop); }); 

 #container { height: 300px; border: 1px solid lightgray; overflow-y: auto; padding: 10px; } #content { background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); height: 1000px; } 

 <div id="container"> <div id="content"> </div> </div>