Как отодвинуть скроллбар?
Возможно ли отодвинуть скроллбар от края ?
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, и ему уже задать отступы и, соответственно, то, что у тебя на скриншоте сделано, можно осуществить.