У меня есть родительский компонент, который имеет переключение секций на основе пролистывания вверх и вниз. Существует дочерний контейнер, который должен иметь прокрутку содержимого, если содержимое переполнено. События колеса мыши сработают как для родительского, так и для дочернего, если дочерний компонент находится в поле зрения, он будет выполнять только прокрутку содержимого, и событие не будет передаваться родительскому элементу для переключения между разделами. Но то же самое не работает для сенсорных устройств.
Изображение ниже - это страница с одним родителем (который является одним разделом), где различные разделы будут загружаться при перемещении вверх или вниз.
Изображение ниже является дочерним компонентом, который переключается при нажатии любого из указанных выше элементов списка. Здесь прокрутка работает абсолютно нормально для настольной мыши и сенсорной панели ноутбука. Но когда мы используем мобильное устройство, прокрутка переключает родительские разделы, а не прокручивает контент.
Я попытался распространить остановку события в контейнере прокрутки дочернего компонента для событий касания.
Мы можем увидеть код, как показано ниже в методе рендеринга дочернего компонента:
<BodyContent onWheel={this.stopPropagation}
onTouchEnd={this.stopPropagation}
onTouchMove={this.stopPropagation}
onTouchStart={this.stopPropagation}>
<BodyHeader>
{content.title}
</BodyHeader>
<div dangerouslySetInnerHTML={{ __html:
content.mainText }} />
</BodyContent>
Приведенный ниже код является функцией в классе дочерних компонентов.
stopPropagation(event) {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
return false;
}
Извините, я не могу скопировать весь код в соответствии с инструкциями.
Любая быстрая помощь приветствуется и спасибо заранее.