Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2023, 18:57
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

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

Цвет бэкграунда меняется без проблем:
document.body.style.scrollbarBaseColor = "#0D588A";
document.body.style.scrollbarArrowColor = "#fff";
document.body.style.scrollbarTrackColor = "#2F83BB";
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2023, 19:04
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

Сообщение от sashgera
Цвет бэкграунда меняется без проблем:
document.body.style.scrollbarBaseColor = "#0D588A";
document.body.style.scrollbarArrowColor = "#fff";
document.body.style.scrollbarTrackColor = "#2F83BB";
В каком браузере?
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2023, 19:30
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Сообщение от voraa Посмотреть сообщение
В каком браузере?
voraa, в IE
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2023, 21:00
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

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;
}
Ответить с цитированием
  #5 (permalink)  
Старый 09.11.2023, 21:20
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

Для хрома и сафари тут посмотри
https://css-tricks.com/custom-scrollbars-in-webkit/
Ответить с цитированием
  #6 (permalink)  
Старый 09.11.2023, 21:23
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

ruslan_mart, спасибо, но мне нужно это сделать средствами js
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2023, 21:44
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,746

Средствами js самый дубовый способ - создать элемент <style> и напихать туда правила прямо в текстовом виде.
Можно работать и непосредственно с таблицей стилей, но это посложнее.
Ответить с цитированием
  #8 (permalink)  
Старый 09.11.2023, 21:55
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

voraa, у меня переменная в js, в которой путь к картинке, значение переменной меняется, style и css не подойдет..
Ответить с цитированием
  #9 (permalink)  
Старый 09.11.2023, 23:07
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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);
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2023, 01:31
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

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>
Изображения:
Тип файла: png err.PNG (2.3 Кб, 4 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать есть ли полоски скроллбара? WadimS jQuery 2 13.11.2016 12:10
Эффект скроллбара для динамически подгружаемых блоков minus_you AJAX и COMET 0 20.04.2016 10:07
Как определить ширину вертик. скроллбара и его присутствие? javascripter Элементы интерфейса 3 26.02.2011 14:57
Как узнать размеры (длину и ширину) ползунка скроллбара? den_zm Элементы интерфейса 2 06.12.2010 13:38
Как отследить движение скроллбара? poorking Events/DOM/Window 2 04.11.2010 20:11