Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Бэкграунд скроллбара (https://javascript.ru/forum/dom-window/85612-behkgraund-skrollbara.html)

sashgera 09.11.2023 18:57
Бэкграунд скроллбара
 
Здравствуйте, подскажите, возможно ли в скроллбар (полоса прокрутки) вставить бэкграунд картинку? Так у меня не получилось:
document.body.style.scrollbarBaseBackgroundImage = "url(/images/backgrounds/bg2";

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

voraa 09.11.2023 19:04
Цитата:
Сообщение от sashgera
Цвет бэкграунда меняется без проблем:
document.body.style.scrollbarBaseColor = "#0D588A";
document.body.style.scrollbarArrowColor = "#fff";
document.body.style.scrollbarTrackColor = "#2F83BB";
В каком браузере?

sashgera 09.11.2023 19:30
Цитата:
Сообщение от voraa (Сообщение 553954)
В каком браузере?
voraa, в IE

ruslan_mart 09.11.2023 21:00
Для хрома и хромоподобных браузеров

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 09.11.2023 21:20
Для хрома и сафари тут посмотри
https://css-tricks.com/custom-scrollbars-in-webkit/

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

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

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

ruslan_mart 09.11.2023 23:07 
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 10.11.2023 01:31
Вложений: 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>

voraa 10.11.2023 08:07
Это
Цитата:
Сообщение от sashgera
ошибка SyntaxError: unterminated string literal
Это код для нормальных современных браузеров. В ИЕ это все не работает. ИЕ давно умер, похоронен и почти истлел.
Шаблонные строки не работают в ИЕ. CSS тоже для современных браузеров. Что там было для ИЕ надо искать в документации микрософт. Все это было нестандартизировано. Я нигде поиском не нашел свойства scrollbarBaseBackgroundImage.

ruslan_mart 10.11.2023 13:01
sashgera, как я и писал выше:

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

---

А зачем Вам IE нужен?

sashgera 10.11.2023 13:16
ruslan_mart, для гаджета windows 7

voraa 10.11.2023 13:25
Цитата:
Сообщение от sashgera
для гаджета windows 7
А на нем нормальный браузер установить нельзя?
Хотя Хром после 119 версии тоже перестал обновляться на w7.

Ну или используйте то, что он тянет. На NN тоже многого не сделаешь.

sashgera 10.11.2023 13:28
Цитата:
Сообщение от voraa (Сообщение 553970)
А на нем нормальный браузер установить нельзя?
, нет, только ie

voraa 10.11.2023 13:32
Какой ИЕ то? 11?

sashgera 10.11.2023 13:35
ie8

voraa 10.11.2023 13:49
Мазохизм

ruslan_mart 10.11.2023 16:33
Значит здесь только средствами JS и имитацией элементов скроллбара через "дивы".

В таком случае, попробуйте поискать старые плагины для jQuery. Ну и сам jQuery старой версии под IE8.

А для чего вам это все? Win 7 тоже не поддерживается уже давно.

anideind 20.01.2024 15:59
Средствами js самый дубовый способ - создать элемент <style> и напихать туда правила прямо в текстовом виде.


Часовой пояс GMT +3, время: 17:14.