Закрыть выпадающее меню при прокрутке
В настоящее время я работаю над проектом с использованием Ant Design, и на одной странице у меня есть раскрывающееся меню. Когда вы нажимаете на меню, оно открывает раскрывающийся список, но если вы прокручиваете вниз, меню остается открытым. Я хочу реализовать это, когда пользователь прокручивает меню вниз.
Я попытался реализовать функцию handleScroll(), чтобы использовать ее с предоставленной опорой onVisibleChange. Однако я не уверен, что я должен добавить в функцию, чтобы она заработала.
handleScroll = (e) => {
window.addEventListener('scroll', () => {
console.info('scrolling');
})
}
<Dropdown onVisibleChange = {visible => this.handleScroll(
console.info(visible)) } trigger = {['click']} overlay = {
<Menu>
<Menu.Item key = "1"
onClick = {() => this.scrollTo(this.whyRef)}>
<Icon icon = {u1F427} /> <strong>WHY</strong>
</Menu.Item>
</Menu>
}>
<Dropdown>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно добавить прослушиватель событий в конструктор и самостоятельно обрабатывать состояние видимости раскрывающегося списка. Попробуйте что-то вроде этого:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
window.addEventListener("scroll", this.closeMenu);
}
toggleMenu = () => {
this.setState({ visible: !this.state.visible });
};
closeMenu = () => {
this.setState({ visible: false });
};
render() {
return (
<div>
<Dropdown
overlay = {menu}
onVisibleChange = {this.toggleMenu}
visible = {this.state.visible}
trigger = {["click"]}
>
<a className = "ant-dropdown-link" href = "#">
Click me <Icon type = "down" />
</a>
</Dropdown>
</div>
);
}
}Рабочий пример: https://codesandbox.io/s/2ovjzwqz9y
Что, если у вас есть div, такой как модальное окно, с фиксированной высотой (<окно) и overflow-y:scroll, то как прослушать прокрутку в модальном окне, потому что окно все еще включено?
@SaheelSapovadia Вы можете справиться с этим так же, если выберете контейнер прокрутки и прикрепите прослушиватель событий к этому элементу. Или, поскольку вы будете отображать div в реакции, вы можете просто передать обработчик onScroll этому элементу.
Большое спасибо, это работает красиво !! Добавление прослушивателя событий в конструктор изменило все. Я запомню это. Большое спасибо, я боролся с этим в течение некоторого времени.