Как заблокировать положение столбца сетки, чтобы предотвратить его прокрутку? - PullRequest
Новая
       18

Как заблокировать положение столбца сетки, чтобы предотвратить его прокрутку?

0 голосов
/ 10 марта 2020

Я использую Grid от semanti c -ui-реагировать, чтобы показать два столбца: меню слева и некоторый контент справа. Когда я прокручиваю страницу, оба столбца прокручиваются вместе. Я хотел бы заблокировать левый столбец, чтобы он оставался на той же позиции на странице, пока пользователь прокручивает основное содержимое.

Я пытался использовать компонент Sticky и не отображал левый компонент от прокрутки. К сожалению, кажется, что это плохо сочетается с сеткой. Страница все еще разделена в соответствии с шириной моего столбца, но содержимое левого столбца больше не заполняет доступное пространство. Я безуспешно пробовал другие вещи, такие как меню пользовательского интерфейса semanti c.

Как я могу заблокировать положение столбца в сетке?

Пример кода

Этот код показывает текущее поведение (т. Е. Оба столбца прокручиваются вместе): 

import _ from 'lodash';
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'semantic-ui-react'

class App extends React.Component {
  renderMainContent() {
    const content = _.times(10, () => (
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ultricies lacus sed turpis tincidunt id aliquet risus. Libero nunc consequat interdum varius sit amet mattis vulputate. Sit amet est placerat in egestas. Blandit volutpat maecenas volutpat blandit aliquam. Nunc consequat interdum varius sit amet. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Nam at lectus urna duis convallis convallis tellus id interdum. Id consectetur purus ut faucibus pulvinar elementum integer enim. Tincidunt ornare massa eget egestas. Auctor augue mauris augue neque gravida. Massa sapien faucibus et molestie ac feugiat sed lectus. Ut venenatis tellus in metus. Consequat nisl vel pretium lectus quam. Pulvinar etiam non quam lacus suspendisse. Semper risus in hendrerit gravida. Ultrices vitae auctor eu augue ut. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi.</p>
    ));

    return (
      <div>
        <h1>Main Content</h1>
        {content}
      </div>
    );
  }

  renderSideBar() {
    return (
      <React.Fragment>
        <a className="ui fluid button">Menu Item #1</a>
        <a className="ui fluid button">Menu Item #2</a>
        <a className="ui fluid button">Menu Item #3</a>
      </React.Fragment>
    );
  }

  render() {
    return (
      <Grid>
        <Grid.Column width={8}>
          {this.renderSideBar()}
        </Grid.Column>
        <Grid.Column width={8}>
          {this.renderMainContent()}
        </Grid.Column>
      </Grid>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));

Этот код показывает мою последнюю попытку с использованием компонента Sticky, но он работает не совсем так, как я надеялся: 

import _ from 'lodash';
import React, { createRef } from 'react';
import ReactDOM from 'react-dom';
import { Grid, Rail, Ref, Segment, Sticky, } from 'semantic-ui-react';

class App extends React.Component {
  contextRef = createRef();

  renderMainContent() {
    const content = _.times(10, () => (
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ultricies lacus sed turpis tincidunt id aliquet risus. Libero nunc consequat interdum varius sit amet mattis vulputate. Sit amet est placerat in egestas. Blandit volutpat maecenas volutpat blandit aliquam. Nunc consequat interdum varius sit amet. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Nam at lectus urna duis convallis convallis tellus id interdum. Id consectetur purus ut faucibus pulvinar elementum integer enim. Tincidunt ornare massa eget egestas. Auctor augue mauris augue neque gravida. Massa sapien faucibus et molestie ac feugiat sed lectus. Ut venenatis tellus in metus. Consequat nisl vel pretium lectus quam. Pulvinar etiam non quam lacus suspendisse. Semper risus in hendrerit gravida. Ultrices vitae auctor eu augue ut. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi.</p>
    ));

    return (
      <div>
        <h1>Main Content</h1>
        {content}
      </div>
    );
  }

  renderSideBar() {
    return (
      <Rail position='left'>
        <Sticky context={this.contextRef}>
          <a className="ui fluid button">Menu Item #1</a>
          <a className="ui fluid button">Menu Item #2</a>
          <a className="ui fluid button">Menu Item #3</a>
        </Sticky>
      </Rail>
    );
  }

  render() {
    return (
      <Grid>
        <Grid.Column width={8} />
        <Grid.Column width={8}>
          <Ref innerRef={this.contextRef}>
            <Segment>
              {this.renderMainContent()}
              {this.renderSideBar()}
            </Segment>
          </Ref>
        </Grid.Column>
      </Grid>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));
...