Изменить полосу прокрутки ng2-pdf-viewer

Я хочу изменить стиль полосы прокрутки в моем ng2-pdf-viewer... После проверки элемента элемент с полосой прокрутки имеет класс .ng2-pdf-viewer-container

Вот мой код... CSS не влияет на полосу прокрутки.

Что мне не хватает?

::ng-deep .ng2-pdf-viewer-container {
  -webkit-overflow-scrolling: touch;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar {
  width: 12px;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar-track {
  background-color: #0dbdaf;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar-thumb {
  background-color: #932222;
  border-radius: 6px;
}

    <div class = "contractWrap">
      <pdf-viewer
        src = "{{selectedApproval.contractLink}}"
        [original-size] = "false"
        [pageFit] = "true"
        [zoom] = "0.95"
        class = "pdfer"
        [autoresize] = "false"
      ></pdf-viewer>
    </div>

css angular ng2-pdfjs-viewer

01.05.2023 23:18

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот как отредактировать полосу прокрутки...

.ng2-pdf-viewer-container::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

.ng2-pdf-viewer-container::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the background color of the track */
}

.ng2-pdf-viewer-container::-webkit-scrollbar-thumb {
  background-color: #132FBD; /* Set the background color of the thumb */
  border-radius: 5px; /* Set the border radius of the thumb */
}

.ng2-pdf-viewer-container::-webkit-scrollbar-track,
.ng2-pdf-viewer-container::-webkit-scrollbar-thumb {
  /* Set the width of the track */
  border: 3px solid transparent; /* Use a transparent border to simulate the track width */
  background-clip: content-box; /* Ensure the background color only covers the content box */
}

18.05.2023 23:11

Другие вопросы по теме

Значение угловой сетки agFormatter не работает

Превращение Angular Material Select Demo Stackblitz в отдельный компонент?

Angular не инициализирует свойство класса перед загрузкой страницы

Как я могу встроить изображение Highchart в файл Excel?

Размещение статического сайта Angular на AWS S3: как решить проблему с политикой CORS?

Исправление zone.js не включает пассивные прослушиватели событий

Как поместить весь объект в один массив объектов на основе некоторых условий

Как добавить google и apple pay в страйп-сессию node.js

InnerHtml в Angular 15 неправильно отображает данные <tr><td> в каждом столбце таблицы html

Ошибка CORS при перенаправлении на страницу проверки Stripe

Изменить полосу прокрутки ng2-pdf-viewer

Ответы 1

Другие вопросы по теме

Похожие вопросы