Как отодвинуть скроллбар?

Возможно ли отодвинуть скроллбар от края ?

  document.addEventListener('DOMContentLoaded', createSelect, false);
  function createSelect() {
      var select = document.getElementsByTagName('select'),
        liElement,
        ulElement,
        optionValue,
        iElement,
        optionText,
        selectDropdown,
        elementParentSpan;
  
        for (var select_i = 0, len = select.length; select_i < len; select_i++) {
          //console.log('selects init');
  
        select[select_i].style.display = 'none';
        wrapElement(document.getElementById(select[select_i].id), document.createElement('div'), select_i, select[select_i].getAttribute('placeholder-text'));
  
        for (var i = 0; i < select[select_i].options.length; i++) {
          liElement = document.createElement("li");
          optionValue = select[select_i].options[i].value;
          optionText = document.createTextNode(select[select_i].options[i].text);
          liElement.className = 'select-dropdown__list-item';
          liElement.setAttribute('data-value', optionValue);
          liElement.appendChild(optionText);
          ulElement.appendChild(liElement);
  
          liElement.addEventListener('click', function () {
            displyUl(this);
          }, false);
        }
      }
      function wrapElement(el, wrapper, i, placeholder) {
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
  
        document.addEventListener('click', function (e) {
          let clickInside = wrapper.contains(e.target);
          if (!clickInside) {
            let menu = wrapper.getElementsByClassName('select-dropdown__list');
            menu[0].classList.remove('active');
          }
        });
  
        var buttonElement = document.createElement("button"),
          spanElement = document.createElement("span"),
          spanText = document.createTextNode(placeholder);
          iElement = document.createElement("i");
          ulElement = document.createElement("ul");
  
        wrapper.className = 'select-dropdown select-dropdown--' + i;
        buttonElement.className = 'select-dropdown__button select-dropdown__button--' + i;
        buttonElement.setAttribute('data-value', '');
        buttonElement.setAttribute('type', 'button');
        spanElement.className = 'select-dropdown select-dropdown--' + i;
        iElement.className = 'zmdi zmdi-chevron-down';
        ulElement.className = 'select-dropdown__list select-dropdown__list--' + i;
        ulElement.id = 'select-dropdown__list-' + i;
  
        wrapper.appendChild(buttonElement);
        spanElement.appendChild(spanText);
        buttonElement.appendChild(spanElement);
        buttonElement.appendChild(iElement);
        wrapper.appendChild(ulElement);
      }
  
      function displyUl(element) {
  
        if (element.tagName == 'BUTTON') {
          selectDropdown = element.parentNode.getElementsByTagName('ul');
          //var labelWrapper = document.getElementsByClassName('js-label-wrapper');
          for (var i = 0, len = selectDropdown.length; i < len; i++) {
            selectDropdown[i].classList.toggle("active");
            //var parentNode = $(selectDropdown[i]).closest('.js-label-wrapper');
            //parentNode[0].classList.toggle("active");
          }
        } else if (element.tagName == 'LI') {
          var selectId = element.parentNode.parentNode.getElementsByTagName('select')[0];
          selectElement(selectId.id, element.getAttribute('data-value'));
          elementParentSpan = element.parentNode.parentNode.getElementsByTagName('span');
          element.parentNode.classList.toggle("active");
          elementParentSpan[0].textContent = element.textContent;
          elementParentSpan[0].parentNode.setAttribute('data-value', element.getAttribute('data-value'));
        }
  
      }
      function selectElement(id, valueToSelect) {
        var element = document.getElementById(id);
        element.value = valueToSelect;
        element.setAttribute('selected', 'selected');
      }
      var buttonSelect = document.getElementsByClassName('select-dropdown__button');
      for (var i = 0, len = buttonSelect.length; i < len; i++) {
        buttonSelect[i].addEventListener('click', function (e) {
                  e.preventDefault();
                  displyUl(this);
              }, false);
          }
  }
.select-dropdown {
    position: relative;
    display: inline-block;
    max-width: 100%;
    font-size: 18px;
    line-height: 120%;
    color: #0071ff;
    font-family: "GolosText-Regular";
}

.select-dropdown__list {
    max-height: 256px;
    background-color: #F3F4F8;
    border-radius: 15px;
    position: absolute;
    left: 0;
    top: 38px;
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    overflow: auto;
    margin: 0;
    padding: 24px;
    border: none;
    list-style-type: none;
    opacity: 0;
    pointer-events: none;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
}

.select-dropdown__list.active {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}

.select-dropdown__list::-webkit-scrollbar {
    width: 10px;
    max-height: 210px;
}

.select-dropdown__list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
}

.select-dropdown__list::-webkit-scrollbar-thumb {
    background: #0071ff;
}

.select-dropdown__list-item {
    font-family: "GolosText-Regular";
    display: block;
    list-style-type: none;
    font-size: 16px;
    line-height: 120%;
    color: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    text-align: left;
    -webkit-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}

.select-dropdown__list-item:hover {
    color: #0071ff;
    -webkit-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
}
                       <select id="normal-select-2" placeholder-text="2024">
                            <option value="1" class="select-dropdown__list-item">2010</option>
                            <option value="2" class="select-dropdown__list-item">2011</option>
                            <option value="3" class="select-dropdown__list-item">2012</option>
                            <option value="4" class="select-dropdown__list-item">2013</option>
                            <option value="5" class="select-dropdown__list-item">2014</option>
                            <option value="6" class="select-dropdown__list-item">2015</option>
                            <option value="7" class="select-dropdown__list-item">2016</option>
                            <option value="8" class="select-dropdown__list-item">2017</option>
                            <option value="9" class="select-dropdown__list-item">2018</option>
                            <option value="10" class="select-dropdown__list-item">2019</option>
                            <option value="11" class="select-dropdown__list-item">2020</option>
                            <option value="12" class="select-dropdown__list-item">2021</option>
                            <option value="12" class="select-dropdown__list-item">2022</option>
                            <option value="12" class="select-dropdown__list-item">2023</option>
                            <option value="12" class="select-dropdown__list-item">2024</option>
                        </select>

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


Ответы (1 шт):

Автор решения: Максим

Как мне кажется, легче всего будет сделать это — обернуть твой выпадающий список каким-нибудь элементом, например div, и ему уже задать отступы и, соответственно, то, что у тебя на скриншоте сделано, можно осуществить.

→ Ссылка