Бэкграунд скроллбара
Здравствуйте, подскажите, возможно ли в скроллбар (полоса прокрутки) вставить бэкграунд картинку? Так у меня не получилось:
document.body.style.scrollbarBaseBackgroundImage = "url(/images/backgrounds/bg2"; Цвет бэкграунда меняется без проблем: document.body.style.scrollbarBaseColor = "#0D588A"; document.body.style.scrollbarArrowColor = "#fff"; document.body.style.scrollbarTrackColor = "#2F83BB"; |
Цитата:
|
Цитата:
|
Для хрома и хромоподобных браузеров
html {
background: lightgrey;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: whitesmoke;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0,0,0,0.25)
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-image: url('https://celes.club/uploads/posts/2022-06/1655833106_42-celes-club-p-tekstura-kamennogo-pola-krasivo-51.jpg');
}
body::-webkit-scrollbar-thumb {
background-image: url('https://c.wallhere.com/photos/ec/1f/texture_crack_black-1182668.jpg!d');
outline: 1px solid slategrey;
}
|
Для хрома и сафари тут посмотри
https://css-tricks.com/custom-scrollbars-in-webkit/ |
ruslan_mart, спасибо, но мне нужно это сделать средствами js
|
Средствами js самый дубовый способ - создать элемент <style> и напихать туда правила прямо в текстовом виде.
Можно работать и непосредственно с таблицей стилей, но это посложнее. |
voraa, у меня переменная в js, в которой путь к картинке, значение переменной меняется, style и css не подойдет..
|
const IMAGE_URL_1 = 'https://celes.club/uploads/posts/2022-06/1655833106_42-celes-club-p-tekstura-kamennogo-pola-krasivo-51.jpg';
const IMAGE_URL_2 = 'https://c.wallhere.com/photos/ec/1f/texture_crack_black-1182668.jpg!d';
const CSS_TEXT = `
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-image: url('${IMAGE_URL_1}');
}
body::-webkit-scrollbar-thumb {
background-image: url('${IMAGE_URL_2}');
outline: 1px solid slategrey;
}
`;
const styleNode = document.createElement('style');
styleNode.sheet.insertRule(CSS_TEXT);
document.head.appendChild(styleNode);
|
Вложений: 1
ruslan_mart, у меня ваш js почему то не выполняется, ошибка SyntaxError: unterminated string literal
и еще вопрос, могу ли я заменить эту строку: background-image: url('${IMAGE_URL_1}'); на: background-image: url('images/backgrounds/bg1.png');
<style type="text/css">
#myDiv{
width: 200px;
height:200px;
overflow: scroll;
border:1px inset #f00;
}
</style>
<div id="myDiv">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
<script>
document.body.onload = function() {
const IMAGE_URL_1 = 'https://celes.club/uploads/posts/2022-06/1655833106_42-celes-club-p-tekstura-kamennogo-pola-krasivo-51.jpg';
const IMAGE_URL_2 = 'https://c.wallhere.com/photos/ec/1f/texture_crack_black-1182668.jpg!d';
const CSS_TEXT = '
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-image: url('${IMAGE_URL_1}');
}
body::-webkit-scrollbar-thumb {
background-image: url('${IMAGE_URL_2}');
outline: 1px solid slategrey;
}
';
const styleNode = document.createElement('style');
styleNode.sheet.insertRule(CSS_TEXT);
document.head.appendChild(styleNode);
}
</script>
|
| Часовой пояс GMT +3, время: 23:59. |