Unable to Scroll Scrollable Content

[NaniChennuri]

My Structure (There are no vertical slides but only Horizontal Slides.) FullPage ------Horizontal Sliders ---------Slider1 ---------Slider2

On each of the Horizontal Slide, I am having a table which lists set of items. I am able to scroll horizontally but unable to scroll the contents inside the table using mouse wheeler.

Below is the sample Code.

--------------------------------------------------MainPage------------------------------------------------------------------- `import React from 'react';

import { Fullpage, HorizontalSlider, Slide } from '../lib/index'; const { changeFullpageSlide, changeHorizontalSlide } = Fullpage;

require('./normalize.css'); require('./skeleton.css'); require('./exampleStyles.styl');

const fullPageOptions = { // for mouse/wheel events // represents the level of force required to generate a slide change on non-mobile, 0 is default scrollSensitivity: 2,

// for touchStart/touchEnd/mobile scrolling // represents the level of force required to generate a slide change on mobile, 0 is default touchSensitivity: 2, scrollSpeed: 500, resetSlides: true, hideScrollBars: true, enableArrowKeys: true,

// optional, set the initial vertical slide activeSlide: 0 };

const horizontalNavStyle = { position: 'absolute', width: '100%', top: '50%', zIndex: 10 };

const horizontalSliderProps = { name: 'horizontalSlider1', infinite: true };

class FullpageReact extends React.Component { constructor(props) { super(props); this.state = { active: { Fullpage: 0, horizontalSlider1: 0 } };

this.onSlideChangeStart = this.onSlideChangeStart.bind(this);
this.onSlideChangeEnd = this.onSlideChangeEnd.bind(this);

}

onSlideChangeStart(name, props, state, newState) { if (!this.horizontalNav) { this.horizontalNav = document.getElementById('horizontal-nav'); }

if (name === 'horizontalSlider1') {
  scrollNavStart(this.horizontalNav);
}

}

onSlideChangeEnd(name, props, state, newState) { if (name === 'horizontalSlider1') { scrollNavEnd(this.horizontalNav); }

const oldActive = this.state.active;
const sliderState = {
  [name]: newState.activeSlide
};

const updatedState = Object.assign(oldActive, sliderState);
this.setState(updatedState);

}

render() { const { active } = this.state;

const horizontalSliderName = horizontalSliderProps.name;
const horizontalActive = this.state.active[horizontalSliderName];

const prevHorizontalSlide = changeHorizontalSlide.bind(null, horizontalSliderName, horizontalActive - 1);
const nextHorizontalSlide = changeHorizontalSlide.bind(null, horizontalSliderName, horizontalActive + 1);

const horizontalNav = (
  <div id='horizontal-nav' style={horizontalNavStyle}>
    <span onClick={prevHorizontalSlide}><button>PREV</button></span>
    <span style={{position: 'absolute', right: '0px'}} onClick={nextHorizontalSlide}><button>Next</button></span>
  </div>
);

const horizontalSlides = [
  <Slide style={{backgroundColor: 'red'}}>
      <TableData cardTitle="one"/>
  </Slide>,
  <Slide style={{backgroundColor: 'yellow'}}>
        <TableData cardTitle="two"/>
  </Slide>,
];
horizontalSliderProps.slides = horizontalSlides;

const horizontalSlider = <HorizontalSlider id='horizontal-slider-1' {...horizontalSliderProps}>{horizontalNav}</HorizontalSlider>;

const verticalSlides = [
  horizontalSlider,
];
fullPageOptions.slides = verticalSlides;

return (
  <Fullpage onSlideChangeStart={this.onSlideChangeStart} onSlideChangeEnd={this.onSlideChangeEnd} {...fullPageOptions}>
  </Fullpage>
);

} }

function scrollNavStart(nav) { // make the nav fixed when we start scrolling horizontally nav.style.position = 'fixed'; }

function scrollNavEnd(nav) { // make the nav absolute when scroll finishes nav.style.position = 'absolute'; }

export default FullpageReact; `

--------------------------------------------------TablePage------------------------------------------------------------------- `import React from 'react'

export default class TableData extends React.Component { constructor(props) { super(props); }

render() { return ( <div className="Card">

    <Card className="mb-4">
      <CardBody className="p-3">
        <CardTitle className="m-0">
          {this.props.cardTitle}
        </CardTitle>            
      </CardBody>
      <CardBody className="p-3">
        <div className="single-field-editor-card-wrap">
          <div className="single-field-editor-table-wrap">
            <Table className="table-condensed single-field-editor-table ">
              <tbody>
                {itemList.map((item) => {
                  return (
                    <tr key={item.id}>
                      <td className="p-1">{item.name}</td>
                    </tr>
                  )
                })}
              </tbody>
            </Table>
          </div>
        </div>
      </CardBody>
    </Card>
  </div>
)

} } `

--------------------------------------------------Table Page CSS-------------------------------------------------------------------

`.single-field-editor-card-wrap { position: relative;
}

.single-field-editor-table-wrap { height: 300px; overflow-y: scroll; border: 1px solid #ddddddff; border-radius: 5px; padding: 5px; }

.single-field-editor-table { table-layout: initial; }

.Card { max-width: 50%; min-width: 50%; left: 20%; position: absolute; }`