阻止浏览器滚动到顶部

时间:2016-11-20 20:35:17

标签: javascript reactjs

我有以下功能来处理组件中的新道具:

componentWillReceiveProps(newProps) {
        this.setState({
            songTitles: newProps.songTitles,
            queue: newProps.songQueue
        });
}

以及以下渲染功能:

render() {
        return(
            <div id="attendee-queue" ref='attendeequeue'>
                <div id="attendee-queue-list">
                {   this.state.songTitles.map((title, i) => {
                        return  <div key={i}>
                                    <div className={this.getDivClass(i) + " attendee-songOuterDiv songPlaying hvr-back-pulse2"}>
                                        <a target="_blank" href={"https://www.youtube.com/watch?v="+this.state.queue[i]}>
                                            <div className="attendee-songInnerDiv"
                                                 onMouseEnter={() => this.handleHoverQueue.bind(i)}
                                                 onMouseLeave={this.handleUnhoverQueue}>
                                                {(this.state.hoverQueueId == i) ? 
                                                    {title}
                                                :
                                                    <p>{title}</p>
                                                }
                                            </div>
                                        </a>
                                    </div>
                                </div>
                    })
                }
                </div>
            </div>
        );
    }

但每次组件的道具发生变化时,浏览器会自动滚动到顶部。我希望防止这种情况发生,让用户保持与原来相同的滚动位置。

我查看了this帖子,但我不认为我有一个可以使用preventDefault的事件。

作为参考,这些是我的其他一些功能:

constructor(props) {
    super(props);
    this.state = {
        songTitles: props.songTitles,
        hoverQueueId: -1,
        queue: props.songQueue
    };
    this.scroll = Scroll.animateScroll;
    this.handleHoverQueue = this.handleHoverQueue.bind(this);
    this.handleUnhoverQueue = this.handleUnhoverQueue.bind(this);
}
handleHoverQueue() {
    this.setState({hoverQueueId:i});
}
handleUnhoverQueue(){
    this.setState({hoverQueueId: -1});
}
getDivClass(i){
    return "divNotHovered";
}

这些是我的进口商品:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Image
} from 'reactstrap';
import {
  formatDateTime
} from '../timeConverter.js';
import Scroll from 'react-scroll';
var url = 'https://djque.herokuapp.com/?query=';
require("../resources/css/eventList.css");

0 个答案:

没有答案