用户滚动到部分时更新位置哈希

Question

我想在用户到达页面上的某个点时更新window.location.hash值.

例如,如果用户滚动到ID ='about'的div,我想要更新url.

与单击自动滚动到页面上的锚点的链接的方式相同,它会更新URL中的哈希值.

我设想通过检测元素是否可见来实现这一点,如果是,则更新window.location.hash = elementsID

打开其他建议.

我正在使用React并试图避免使用JQuery,因此非常感谢vanilla的JS建议.谢谢.

编辑:

谢谢你的建议.管理以与vanilla JS组合解决方案并在react组件中实现它.代码仍然需要清理,但你得到了要点

class HomeView extends React.Component{

    constructor () {
    super();

    this.state = {
      hash: '#'
    }

    this.elements = {}
  }

  componentDidMount(){
    this.scrollListener();
  }

  componentDidUpdate(prevProps){
    if(this.props.location.hash !== prevProps.location.hash){
        this.scrollToHash(this.props.location.hash)
    }

  }

  scrollListener(){
    window.addEventListener('scroll', (event) => {

        if(window.pageYOffset > 0 && window.pageYOffset < this.elements.about.offsetTop  - 200){
            const hash = '#';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        } else if(window.pageYOffset > this.elements.about.offsetTop - 200 && window.pageYOffset < this.elements.skills.offsetTop - 200) {
            const hash = '#about';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        } else if(window.pageYOffset > this.elements.skills.offsetTop - 200 && window.pageYOffset < this.elements.contact.offsetTop - 200) {
            const hash = '#skills';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        }else if(window.pageYOffset > this.elements.skills.offsetTop - 200) {
            const hash = '#contact';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        }

    })
  }

  updateHashState(hash) {
    switch(hash){
        case '#about':
            this.setState({
                forward: '#skills',
                back: '#'
            })
            break;
        case '#skills':
            this.setState({
                forward: '#contact',
                back: '#about'
            })
            break;
        case '#contact':
            this.setState({
                forward: '',
                back: '#skills'
            })
            break;
        default:
            this.setState({
                forward: '#about',
                back: ''
            })
            break;
    }
  }




    render(){

        return(
            ...
        )

    }

}

export default HomeView

Answer 1

正如另一个想法,通过获取滚动值来更新哈希更加健壮.可以在jQuery中使用scrollTop().

$(window).scroll(
    function(){
        if($(this).scrollTop() > 100 && $(this).scrollTop() < 200){
            window.location.hash = "your_hash_name";
        }else{
            window.location.hash = "";
        }
    }
);

location.hash在(100, 200)像素之间滚动后,这会更新值.