Скрываем scroll

Scroll появляется в вёрстке компонентов когда элементов, например ссылок в меню, больше, чем может вместить в себе ширина или высота этого меню. Аналогичная ситуация и при вёрстке компонента под разные разрешения. Обычно мы всегда скрываем scroll, чтобы на странице у пользователя не появлялись ненужные артефакты.

В этом туториале мы расскажем на примере scroll menu как мы избавляемся от scroll.

Пример

Для начала нам нужно создать структуру будущего scroll menu. Делаем <div> O_ScrollMenu и кладем в него еще один <div> C_MenuItems. У нас уже есть туториал про menu items.

import React, { PureComponent } from 'react'
import A_MenuItem from '../../atoms/A_MenuItem/A_MenuItem.jsx'
import './O_ScrollMenu.scss'

export default class O_ScrollMenu extends PureComponent {
  constructor(props) {
    super(props)
  }

  render() {
    const { menu } = this.props
    const { top } = menu
    const menuElements = []

    top.forEach((item, i) => {
      menuElements.push(<A_MenuItem {...item} key={'top' + i} />)
    })

    return (
      <div className="O_ScrollMenu">
        <div className="C_MenuItems">{menuElements} </div>
      </div>
    )
  }
}

Теперь нужно задать стили для O_ScrollMenu. Именно в css мы и будем убирать scroll. Главные параметры это overflow-y: hidden и overflow-x: scroll. Вот так это выглядит в коде. Можешь посмотреть получившийся scroll menu.

.O_ScrollMenu {
  display: flex;
  justify-content: center;
  margin: 10% auto;
  height: 300px;
  overflow-x: hidden;
  width: 360px;
  padding: 40px 28px;
  box-shadow: 9px 9px 35px rgba(0, 0, 0, 0.09);
  border-radius: 10px;
}

.O_ScrollMenu .C_MenuItems {
  display: flex;
  flex-direction: column;
  padding-right: 380px;
  white-space: nowrap;
  margin-left: 84px;
  overflow-y: scroll;
  overflow-x: hidden;
}
 

Заключение

С помощью этого метода мы эффективно убираем ненужные для пользователя элементы.

Компоненты

Продолжи изучать туториалы с новыми знаниями о фишках в работе scroll.