1

Как отредактировать скролл бар внутри дропдауна? У меня есть PSD макет, сделал кнопку с дропдауном, в нем пункты, надо что бы етот DropDown был ограничен, и был скролл бар overflow:auto; я его добавил к выпадающему блоку и в блоке есть стандартный ползунок, а как теперь приклеить из PSD макета или отредактировать ползунок ( jQuery / CSS )? Где можно посмотреть очень подробные примеры? ( без скролл дорожки для ползунка ). Мой дропдаун буттон:

            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn"></button>
            <div id="myDropdown" class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>

1 ответ 1

3

Во-первых нужно понять, что все, что здесь написано, не будет на 100% кроссбраузерным.
Во-вторых, это только то, что мне удалось найти по простому запросу в гугле:
1. http://manos.malihu.gr/jquery-custom-content-scroller/
2. https://noraesae.github.io/perfect-scrollbar/
Здесь примеры с codepen'а:
1. http://codepen.io/MathieuRichard/pen/HAgnm
2. http://codepen.io/GhostRider/pen/GHaFw (этот - мой любимый)

По сути же все делается просто при помощи webkit-skrollbar wbkit-scrollbar-track и подобных вещей. Но сразу обратите внимание, что это справедливо только для chrome-подобных браузеров.

P.S. Если вам не нужна сколл-дорожка (webkit-scrollbar-track свойство), то установите ему цвет transparent, ну или просто цвет родительского блока.

2
  • Пасибки, помогло 2 июн 2016 в 5:44
  • @BonBonSlick Если помогло решение, то помечайте его правильным (галочка слева от ответа) и говорите спасибо (стрелочка вверх слева от ответа). 2 июн 2016 в 5:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.