javascript - 如何在react-split-pane中支持单独滚动各个 Pane ？

Question

我正在使用 react 分割 Pane 组件。但我必须支持这两个组件的单独滚动。但是使用overflowY将样式应用于单独的 Pane :滚动不起作用

下面给出了代码。

所有问题所在的简短代码片段是

<SplitPane split="vertical" primary='first' minSize={300} defaultSize={700}  /*style={{overflowX: 'hidden' ,overflowY: 'hidden'}}*/ >
            <div style={{overflowX: 'hidden' ,overflowY: 'scroll'}}><Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/></div>
            <Pane style={{overflowX: 'hidden' ,overflowY: 'scroll'}}> 

/* eslint-disable no-unused-vars*/
import React, { Component } from 'react'
// eslint-disable-next-line no-unused-vars
import SplitPane, { Pane } from 'react-split-pane'
import Split from 'react-split'
import IDE from './IDE'
import INPUT from './input_component'
import OUTPUT from './output_component'
import '../css/problem_page.css'
import Navigator from './problem_navigator'
import stat from '../Introduction.md'
import ed from '../markdowns/ed.md'
import h1 from '../markdowns/h1.md'
import h2 from '../markdowns/h2.md'
import h3 from '../markdowns/h3.md'
class Problem extends Component {
    state = {
        input: 'INPUT HERE', output: 'OUTPUT HERE', code: '', verdict: 'No submissions made recently', vcolor:'yellow', 
        statement:'TO BE TRANSFERRED FROM MD FILE',
        editorial:'TO BE MADE SOON',
        submissions: 'NO SUBMISSIONS YET',
        hints: []
      }
      componentWillMount() {
        fetch(stat).then((response) => response.text()).then((text) => {
          this.setState({ statement: text });
        })
        fetch(ed).then((response) => response.text()).then((text) => {
          this.setState({editorial:text});
        })
        fetch(h1).then((response) => response.text()).then((text) => {
          var hints=this.state.hints;
          hints.push(text);
          this.setState({hints:hints});
        })
        fetch(h2).then((response) => response.text()).then((text) => {
          var hints=this.state.hints;
          hints.push(text);
          this.setState({hints:hints});
        })
        fetch(h3).then((response) => response.text()).then((text) => {
          var hints=this.state.hints;
          hints.push(text);
          this.setState({hints:hints});
        })
      }
      inputChange = (e) => {
        this.setState({ input: e.target.value })
      }
      codeChange = (value) => {
        this.setState({ code: value })
      }
      runIDE = (e) => {
        console.log(this.state.code + ' \n' + this.state.input + ' \n' + this.state.output)
      }
      evaluate =(e) => {

      }
  render () {
    return (
            <SplitPane split="vertical" primary='first' minSize={300} defaultSize={700}  style={{overflowX: 'hidden' ,overflowY: 'hidden', display: 'flex', flexDirection: 'row' }} >
            <Pane style={{ overflowY: 'scroll'}}><Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/></Pane>
            <Pane style={{ overflowY: 'scroll'}}>
            <div style={{ backgroundColor: '#5b6467', backgroundImage: 'linear-gradient(315deg, #5b6467 0%, #8b939a 74%)'}}>
           
            <IDE change={this.codeChange.bind(this)}/> 
              <div style={{height:'6vh',width:'150vh',display:'flex',flexDirection: 'row'}}>
                <button  type='submit' class='btn btn-primary' style={{ marginLeft: '10px', marginTop: '10px', fontWeight: 'bold' }} onClick={this.runIDE}>
                Custom Run
                </button>

                <button type='submit' class='btn btn-success' style={{ marginLeft: '20px', marginTop: '10px', fontWeight: 'bold' }} onClick={this.evaluate}>
                Evaluate
                </button>

                <textarea className='form-control' value={this.state.verdict} style={{ height: '4vh', width: '70vh', marginLeft: '20vh', marginTop: '13px', borderRadius: '10px',backgroundColor:this.state.vcolor}}>
                </textarea>
                </div>

                <div style={{height:'26vh',width:'150vh',display:'flex',flexDirection: 'row'}}>
                <INPUT inp={this.state.input} hgt='23vh' wdt='60vh' inpu={this.inputChange.bind(this)} />
                 <OUTPUT out={this.state.output} hgt='23vh' wdt='60vh'/>
                </div>
            </div>
            </Pane>
        </SplitPane>
    )
  }
}
export default Problem

谁能帮我支持react-split-pane内各个 Pane 的单独滚动。

我尝试了堆栈溢出答案，但找不到好的答案

react-split-pane 的文档链接

请帮我解决这个问题。

来 self 的本地主机的输出

使用 @Anishs 答案解决了 UPD

使用以下更新的代码。

<SplitPane split="vertical" primary='first' minSize={300} defaultSize={700}  style={{ position:'relative' , overflow:'hidden' }} >
              <Pane style={{ height: '119vh', overflowY: 'scroll', overflowX:'hidden' }}>
              <Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/>
              </Pane>
            <Pane>
            <div style={{ backgroundColor: '#5b6467', backgroundImage: 'linear-gradient(315deg, #5b6467 0%, #8b939a 74%)'}}>
           

只需向要进行滚动的部分添加高度即可。

Answer 1

您缺少高度 CSS 属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y