如何在 react-split-pane 中分别支持单个窗格的滚动？

Posted 2023-02-22

【中文标题】如何在 react-split-pane 中分别支持单个窗格的滚动？

【英文标题】：How to support scrolling for individual panes separately in react-split-pane?

【发布时间】：2021-05-04 21:26:41

【问题描述】：

我正在使用反应拆分窗格组件。但我必须支持两个组件的单独滚动。但是将样式应用于具有溢出的单独窗格：滚动不起作用

下面是代码。

所有问题所在的短代码sn-p是

<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 中单独滚动各个窗格。

我尝试堆栈溢出答案，但我无法找到一个好的答案

react-split-pane 的文档链接

请帮我解决这个问题。

本地主机的输出

UPD 使用 @Anishs 的答案解决了

使用以下更新的代码。

<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%)'>
           

只需将高度添加到要进行滚动的部分。

【参考方案1】：

您缺少 height CSS 属性。

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

【讨论】：

是的，我现在修复了它，因为高度不受限制。谢谢