Как добавить вертикальный скролл css

Убрать вертикальный скрол ,но оставить горизонтальный свойством overflow-y: scroll?

введите сюда описание изображения

мой код,но появляется автоматом вертикальная полоска

.new-box-container

Отслеживать
задан 1 окт 2018 в 12:55
Энрико Такатти Энрико Такатти
397 2 2 серебряных знака 12 12 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если вам надо использовать именно горизонтальный скролл, то необходимо воспользоваться свойством

overflow-x: scroll;

А overflow-y либо вообще не трогать, либо установить в положение

overflow-y: hidden;

Отслеживать
ответ дан 1 окт 2018 в 13:44
Anton Mironov Anton Mironov
1,257 9 9 серебряных знаков 15 15 бронзовых знаков

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Есть такая менюшка, она ездит со скроллом страницы и полностью не помещается на высоту экрана.
Проблема в том что когда я уменьшаю высоту меню и показываю вертикальный скролл то эти все пункты выезжают вправо и как бы блок становится больше. И появляется горизонтальная полоса прокрутки

column-count: 3; height: 80vh; overflow-y: scroll;

Как сделать что бы блок растягивался в высоту и что бы можно было скроллить?

Вопрос задан более двух лет назад
4853 просмотра

Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла для Mozilla Firefox

Чтобы изменить скролл в Firefox, используйте следующий код.

html, body < scrollbar-color: #458245 #714826; /* «цвет ползунка» «цвет полосы скроллбара» */ scrollbar-width: auto | thin | none; /* толщина */ >

Первое значение scrollbar-color изменяет цвет ползунка, второе — цвет скроллбара.

Стилизация скролла в Mozilla Firefox

Значения scrollbar-width изменят толщину (ширину — для вертикального скроллбара, высоту — для горизонтального):

auto — толщина скролла по умолчанию;
thin — более тонкий вариант скролла;
none — скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox .

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла

Какой-то контент. Текст, изображения или что-то ещё.

Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

/* полоса прокрутки (скроллбар) */ ::-webkit-scrollbar < width: 24px; /* ширина для вертикального скролла */ height: 8px; /* высота для горизонтального скролла */ background-color: #143861; >/* ползунок скроллбара */ ::-webkit-scrollbar-thumb < background-color: #843465; border-radius: 9em; box-shadow: inset 1px 1px 10px #f3faf7; >::-webkit-scrollbar-thumb:hover < background-color: #253861; >/* Стрелки */ ::-webkit-scrollbar-button:vertical:start:decrement < background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:vertical:end:increment < background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:start:decrement < background: linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:end:increment

mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar.

Сначала скачайте архив и извлеките к себе в проект файлы:

jquery.mCustomScrollbar.min.css
jquery.mCustomScrollbar.concat.min.js
mCSB_buttons.png

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

Инициализация

Инициализация через JavaScript

(function ($) < $(window).on("load", function () < $(".mycustom-scroll").mCustomScrollbar(); >); >)(jQuery);

Как вложить scroll внутрь элемента

При наведении на td появляется скролл, помогите сделать чтобы этот скролл был внутри td и не хватал себе отдельную высоту.

table < border-collapse: collapse; >td < max-width: 100px; border: 1px solid #d4d7db; white-space: nowrap; overflow-x: hidden; border-spacing: 0px; >td:hover

  Lorem ipsum dolor sit amet elit. Magni, aliquam!  Lorem ipsum dolor sit amet elit. Magni, aliquam!  Lorem ipsum dolor sit amet elit. Magni, aliquam!

Отслеживать
3,847 9 9 серебряных знаков 22 22 бронзовых знака
задан 29 мая 2020 в 12:00
Yoba Fighter Yoba Fighter
67 6 6 бронзовых знаков
Зачем Вы изменили код в вопросе после того, как дали ответ? Теперь ответ не имеет смысла, так?
29 мая 2020 в 13:08

@UModeL, ну я думал перефразировать вопрос, на тему от количества текста, потом начал с js’ом играться и забыл дописать вопрос. В общем сейчас обратно изменю как было, а потом если что новый вопрос задам, т.к. это уже другой вопрос) ещё раз спасибо

29 мая 2020 в 13:52

3 ответа 3