Бэкграунд скроллбара

[sashgera]

Здравствуйте, подскажите, возможно ли в скроллбар (полоса прокрутки) вставить бэкграунд картинку? Так у меня не получилось:

document.body.style.scrollbarBaseBackgroundImage = "url(/images/backgrounds/bg2";

Цвет бэкграунда меняется без проблем:

document.body.style.scrollbarBaseColor = "#0D588A";
document.body.style.scrollbarArrowColor = "#fff";
document.body.style.scrollbarTrackColor = "#2F83BB";

[voraa]

Цвет бэкграунда меняется без проблем:
document.body.style.scrollbarBaseColor = "#0D588A";
document.body.style.scrollbarArrowColor = "#fff";
document.body.style.scrollbarTrackColor = "#2F83BB";

В каком браузере?

[sashgera]

В каком браузере?

voraa, в IE

[ruslan_mart]

Для хрома и хромоподобных браузеров

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;
}

[voraa]

Для хрома и сафари тут посмотри
https://css-tricks.com/custom-scrollbars-in-webkit/

[sashgera]

ruslan_mart, спасибо, но мне нужно это сделать средствами js

[voraa]

Средствами js самый дубовый способ - создать элемент <style> и напихать туда правила прямо в текстовом виде.
Можно работать и непосредственно с таблицей стилей, но это посложнее.

[sashgera]

voraa, у меня переменная в js, в которой путь к картинке, значение переменной меняется, style и css не подойдет..

[ruslan_mart]

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);

[sashgera]

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>