Изменение полосы прокрутки через JS

@AndrewVladimir · Регистрация: 27.07.2010

Студворк — интернет-сервис помощи студентам

Что надо сделать чтобы изменить полосу прокрутки? Надо чтобы, допустим вместо самой полосы отображалась картинка, именно картинка!

@arvitaly · 03.08.2010, 13:06

Делаешь страницу без прокрутки вовсе а справа размещаешь див

@AndrewVladimir · 03.08.2010, 13:13 **[ТС]**

Можно подробнее

@arvitaly · 03.08.2010, 13:14

Ну сначала ты сам поподробнее расскажи, а лучше нарисуй, что за картинка, должна ли она прокручивать, скриншоты пришли того, что хочешь и поведение

@AndrewVladimir · 03.08.2010, 13:26 **[ТС]**

Стрелка вниз: Название: 8b60e6947d1ca56501e8ad39035e959e.jpg
Просмотров: 1111

Размер: 919 байт

Сама полоса для прокрутки: Название: 6252f38c658f95a30d864001119a0996.jpg
Просмотров: 1122

Размер: 1.1 Кб

Стрелка вверх: Название: 3c22907d5f0c9849c6bcac09e38923ce.jpg
Просмотров: 1119

Размер: 923 байт

Полоса:

Название: 4837a0166d73cf50fbc4b34ddaf8b4d0.jpg
Просмотров: 1128

Размер: 665 байт

Надо просто заменить, что для этого нужно сделать?

@arvitaly · 03.08.2010, 13:31

Соответственно, размещаем справа несколько дивов (стрелки, прокрутки) с картинками.

Обрабатываем их события при нажатии на верхнюю или нижнюю стрелку ) главный див двигаем top и left вверх или вниз

@AndrewVladimir · 03.08.2010, 13:38 **[ТС]**

Можете код написать пожалуйста

@arvitaly · 03.08.2010, 13:39

Ну как нить попозже если тока

Vovan-VE · 03.08.2010, 13:43

AndrewVladimir, Зачем изобретать велосипед? Никто в браузерах таким скроллом не занимается, ибо игра не стоит свеч.

@arvitaly · 03.08.2010, 13:43

AndrewVladimir, Зачем изобретать велосипед? Никто в браузерах таким скроллом не занимается, ибо игра не стоит свеч.

Неправда, я видел на многих игровых сайтах и развлекательных. Довольно прикольно.

Vovan-VE · 03.08.2010, 13:46

Сообщение от arvitaly

я видел на многих игровых сайтах и развлекательных

Вы уверены, что это был не флеш?

@arvitaly · 03.08.2010, 13:48

Да, именно

@AndrewVladimir · 03.08.2010, 13:48 **[ТС]**

Господи напишите код пожалуйста

@BANO · 31.08.2014, 11:56

есть отвеееет

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.scrollBy(0,100)//переносит на 100px вверх
 
 
 
//=====узнаём размер страницы для div(бегунка) потом сам разберёшься 
var scrollHeight = document.documentElement.scrollHeight;
var clientHeight = document.documentElement.clientHeight;
scrollHeight = Math.max(scrollHeight, clientHeight);
//======закончили=========== размер теперь в scorllHeight 
 
 
 
//а вот функция
var posY = 0
function scorllY(to) {
switch (to) {
case "-" : posY = posY + 500; break;//можно изменить число на значение икселей
case "+" : posY = posY - 500; break;//тут тоже
}
window.scrollTo(0,posY)
}

использование:

HTML5
1
<div onclick="scorllY("+")"></div><!--это для перемещения вверх на 500px соответственно "-" вниз-->

вообщем сам искал сам нашёл сам сделал и другим помог

Добавлено через 13 часов 10 минут
ошибочка в использовании '+' и '-' писать в таких скобках

@Thisman · 31.08.2014, 12:21

Вообще есть такая вещь, как scroolbar, которой можно прописать css свойства.
Это и есть как раз полоса прокрутки. Поэтому, может обойтись без JS?

@BANO · 31.08.2014, 13:24

Thisman, а ты заметил чо сказал спросивший
но насчёт css может пойти не слышал о таком но можно с помощью js прицепить анимацию какую нибудь

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@AndrewVladimir 2 / 2 / 1 Регистрация: 27.07.2010 Сообщений: 74

	Изменение полосы прокрутки через JS 03.08.2010, 12:33. Показов 6703. Ответов 15 Метки нет (Все метки) Что надо сделать чтобы изменить полосу прокрутки? Надо чтобы, допустим вместо самой полосы отображалась картинка, именно картинка! 0

@arvitaly Благотворец 142 / 122 / 13 Регистрация: 29.04.2009 Сообщений: 537
	03.08.2010, 13:06
	Делаешь страницу без прокрутки вовсе а справа размещаешь див 0

@AndrewVladimir 2 / 2 / 1 Регистрация: 27.07.2010 Сообщений: 74
	03.08.2010, 13:13 [ТС]
	Можно подробнее 0

@arvitaly Благотворец 142 / 122 / 13 Регистрация: 29.04.2009 Сообщений: 537
	03.08.2010, 13:14
	Ну сначала ты сам поподробнее расскажи, а лучше нарисуй, что за картинка, должна ли она прокручивать, скриншоты пришли того, что хочешь и поведение 0

@AndrewVladimir 2 / 2 / 1 Регистрация: 27.07.2010 Сообщений: 74
	03.08.2010, 13:26 [ТС]
	Стрелка вниз: Сама полоса для прокрутки: Стрелка вверх: Полоса: Надо просто заменить, что для этого нужно сделать? 0

@arvitaly Благотворец 142 / 122 / 13 Регистрация: 29.04.2009 Сообщений: 537
	03.08.2010, 13:31
	Соответственно, размещаем справа несколько дивов (стрелки, прокрутки) с картинками. Обрабатываем их события при нажатии на верхнюю или нижнюю стрелку ) главный див двигаем top и left вверх или вниз 0

@AndrewVladimir 2 / 2 / 1 Регистрация: 27.07.2010 Сообщений: 74
	03.08.2010, 13:38 [ТС]
	Можете код написать пожалуйста 0

@arvitaly Благотворец 142 / 122 / 13 Регистрация: 29.04.2009 Сообщений: 537
	03.08.2010, 13:39
	Ну как нить попозже если тока 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	03.08.2010, 13:43
	AndrewVladimir, Зачем изобретать велосипед? Никто в браузерах таким скроллом не занимается, ибо игра не стоит свеч. 0

@arvitaly Благотворец 142 / 122 / 13 Регистрация: 29.04.2009 Сообщений: 537
	03.08.2010, 13:48
	Да, именно 0

Опции темы

@AndrewVladimir 2 / 2 / 1 Регистрация: 27.07.2010 Сообщений: 74
	03.08.2010, 13:48 [ТС]
	Господи напишите код пожалуйста 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	31.08.2014, 12:21
	Вообще есть такая вещь, как scroolbar, которой можно прописать css свойства. Это и есть как раз полоса прокрутки. Поэтому, может обойтись без JS? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	31.08.2014, 13:24
	Thisman, а ты заметил чо сказал спросивший но насчёт css может пойти не слышал о таком но можно с помощью js прицепить анимацию какую нибудь 0