PrepBro
← Назад к вопросам

Как скрыть вертикальный скролл?

2.2 Middle🔥 121 комментариев
#Soft Skills и рабочие процессы

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как скрыть вертикальный скролл?

CSS способ (самый простой)

/* === Скрыть скролл, но сохранить прокрутку === */

/* Для body/html */
body {
  overflow-y: hidden; /* скрывает вертикальный скролл */
}

/* Для конкретного элемента */
.no-scroll {
  overflow-y: hidden;
  height: 100vh; /* или конкретная высота */
}

/* === Скрыть в Safari, Chrome, Firefox === */

/* Способ 1: прямое скрытие */
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

body {
  -ms-overflow-style: none; /* IE, Edge (старая версия) */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll; /* остаётся прокрутка */
}

/* === Полностью скрыть скролл во всех браузерах === */

.container {
  overflow-y: hidden; /* скрывает скролл */
  height: 100vh;
}

/* === Скрыть скролл, но разрешить прокрутку (для мобилок) === */

.scroll-hidden {
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none;      /* Firefox */
}

.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

JavaScript подход

// === Скрыть скролл при открытии модала === 

function disableScroll() {
  document.body.style.overflow = 'hidden';
}

function enableScroll() {
  document.body.style.overflow = 'auto';
}

// === Сохранить позицию скролла === 

let scrollY = 0;

function disableScrollWithPosition() {
  scrollY = window.scrollY;
  document.body.style.overflow = 'hidden';
  document.body.style.top = `-${scrollY}px`;
  document.body.style.position = 'fixed';
  document.body.style.width = '100%';
}

function enableScrollWithPosition() {
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.overflow = '';
  window.scrollTo(0, scrollY);
}

// === React хук === 

export function useDisableScroll(isDisabled) {
  useEffect(() => {
    if (isDisabled) {
      document.body.style.overflow = 'hidden';
      return () => {
        document.body.style.overflow = 'unset';
      };
    }
  }, [isDisabled]);
}

export function Modal({ isOpen, onClose }) {
  useDisableScroll(isOpen);

  return (
    isOpen && (
      <div className="modal">
        <button onClick={onClose}>Close</button>
      </div>
    )
  );
}

Tailwind CSS

// === Использование Tailwind === 

export function ModalDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/* body с скрытым скроллом */}
      {isOpen && (
        <div className="fixed inset-0 bg-black/50 z-40">
          <div className="fixed inset-0 overflow-hidden">
            {/* Modal */}
            <div className="absolute inset-0 overflow-y-auto">
              <div className="flex items-center justify-center h-full">
                <div className="bg-white p-6 rounded-lg">
                  <button onClick={() => setIsOpen(false)}>
                    Close
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Оборачиваем body */}
      <html className={isOpen ? 'overflow-hidden' : ''}>
        {/* ... */}
      </html>
    </>
  );
}

Полная реализация (React Modal)

export function Modal({ isOpen, onClose, children }) {
  useEffect(() => {
    if (isOpen) {
      // Скрываем скролл и сохраняем позицию
      const scrollY = window.scrollY;
      document.body.style.position = 'fixed';
      document.body.style.top = `-${scrollY}px`;
      document.body.style.width = '100%';
      document.body.style.overflow = 'hidden';

      return () => {
        // Восстанавливаем скролл
        document.body.style.position = '';
        document.body.style.top = '';
        document.body.style.width = '';
        document.body.style.overflow = '';
        window.scrollTo(0, scrollY);
      };
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg max-w-md">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}