Создание своей собственной прокрутки для блока

@arcmag · Регистрация: 27.06.2014

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

Всем привет. Вот периодически натыкаюсь на сайтах на различные колонки новостей у которых имеется ограниченная высота но для которых есть возможность прокрутки содержимого.
Конечно подобное легко делается при помощи такой штуки как overflow:scroll; но внеше выглядит не очень приятно. А что если я хочу допустим в качестве ползунка использовать какой нибудь смайлик, картинку или еще что то? Вот и решил сделать свой скрипт на прокрутку содержимого внутри блока.
То есть у меня есть блок обертка с ограниченной высотой и свойством overflow:hidden; и блок с содержимым который находится внутри и высота которого превышает высоту блока обертки.
Саму идею реализовать вроде бы удалось, но теперь возник вопрос об улучшении.
Вот код, а дальше вопросы по улучшению:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка</title>
<style>
*{ padding:0px; margin:0px; box-sizing:border-box; -moz-box-sizing:border-box;}
body{background:#CCC;}
.wrapper{
    margin:5px auto;
    background:#FFF;
    width:900px;
    height:550px;
    border:solid 3px black;
    overflow:hidden;
    position:relative;
    padding:7px 25px 7px 7px;
}
.wrapper .scrollBlock{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:13px;
    background:#CC0;
    box-shadow:inset 0px 0px 15px #FF9900;
    border-left: solid 1px black;
    display:none;
}
.wrapper .scrollicon{
    position:absolute;
    right:0px;
    top:0px;
    height:10%;
    width:13px;
    background:#09F;
    box-shadow:inset 0px 0px 7px #00FFFF;
    cursor:pointer;
    display:none;
}
.wrapper .scrollicon:active{
    outline:solid 1px white;
    box-shadow:inset 0px 0px 7px #00FFFF, 0px 0px 3px #00FFFF;
    background:#000;
}
.test{
    position:fixed;
    margin-left:-53px;
    background:#000;
    padding:10px;
    color:#FFF;
}
</style>
<script>
var wrapper, block, scrollBlock, scrollicon, nowMouse, nowMouse2, nowMouse3, testVar;
var point = false;
var point2 = false;
window.onload = function(){
    wrapper = document.getElementsByClassName("wrapper").item(0);
    block = document.getElementsByClassName("block").item(0);
    scrollBlock = document.getElementsByClassName("scrollBlock").item(0);
    scrollicon = document.getElementsByClassName("scrollicon").item(0);
    test_scroll();
    scrollicon.onmousedown = icon_scroll_down;
    document.onmouseup  = function(){point=false;}
    document.onmousemove = icon_scroll_move;
}
function test_scroll(){ // проверка высоты блока
    if(block.offsetHeight>wrapper.offsetHeight){ 
        scrollBlock.style.display = "block"; scrollicon.style.display = "block";
    }
    else{
        scrollBlock.style.display = "none"; scrollicon.style.display = "none";
    }
}
function icon_scroll_down(e){ //функция активации ползунка
    nowMouse = e.clientY-scrollicon.offsetTop; point=true; test_out();
}
function icon_scroll_move(e){ //функция движения ползунка
    if(point){
        scrollicon.style.top = (e.clientY - nowMouse)+"px";
        if(scrollicon.offsetTop<0){ scrollicon.style.top=0; }
        else if(scrollicon.offsetTop>wrapper.offsetHeight-scrollicon.offsetHeight)
        scrollicon.style.top=(wrapper.offsetHeight-scrollicon.offsetHeight)+"px";
        var nowMouse3 = wrapper.offsetHeight-scrollicon.offsetHeight
        var wrapperPercent = nowMouse3/100;
        var blockPercent = (block.offsetHeight-nowMouse3)/100;
        nowMouse2 = (scrollicon.offsetTop/wrapperPercent).toFixed(2);
        block.style.marginTop = -(nowMouse2*blockPercent).toFixed(0)+"px";
        testVar = block.style.marginTop;
        test_out();
    }
}
function test_out(){
    document.getElementsByClassName("test").item(0).innerHTML = testVar;
}
</script>
</head>
<body>
<div class="wrapper">
    <div class="test">000</div>
    <div class="block">
<h1>HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»)</h1>
<p>Cтандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.</p>
<p>Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.</p>
<p>Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария).</p> 
<p>HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. </p>
<p>Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).</p> <p>Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег TABLE предназначен для создания в документах таблиц, но часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.</p>
<p>Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari (см.: Браузер#Рыночные доли).</p>
<p>Отличия[править | править вики-текст]
Некоторые библиотеки[3] используют сброс стилей (reset.css) для приведения в соответствие стилей по умолчанию для разных браузеров, в то время как другие[4] используют нормализацию (Normalize.css), что уменьшает количество изначального кода библиотеки.</p>
<p>Типы CSS-библиотек[править | править вики-текст]
Из-за упомянутых недостатков — использование CSS-библиотек вызывает споры в профессиональном сообществе. Также это привело к появлению различных типов CSS-библиотек. Условно можно выделить два типа: Всеобъемлющие и Ограниченные. Третьим вариантом может быть разработка собственной библиотеки[5]. Этот вариант предпочитает большинство разработчиков, так как это дает выгоды персонального решения и уменьшает негативные моменты зависимости от использования сторонних библиотек.</p>
<p>Всеобъемлющие CSS-библиотеки[править | править вики-текст]
Этот тип библиотеки пытается охватить большинство вещей, которые могут понадобиться разработчику. К этому типу отнесем библиотеки, которые включают CSS для верстки и сброса (или какую-то основу).</p>
<p>Ограниченные CSS-библиотеки[править | править вики-текст]
Как следует из названия, библиотеки этого типа охватывают лишь ограниченный объём потребностей или имеют конкретную цель.</p>
    </div>
    <div class="scrollBlock"></div>
    <div class="scrollicon"></div>
</div>
</body>
</html>

1) При прокрутке блока и выходе курсора мыши за пределы блока ползунка начинает выделяться весь текст который есть в блоке что не очень приятно, как бы этого можно было бы избежать?
2) Прокрутка сделана и работает только если перетягивать ползунок , хотелось бы сделать так что бы была возможность прокрутки при наведении мыши на блок с помощью активации колесика мыши, ну как в обычных страницах, крутишь колесико двигается страница. (Пытался пошаманить с событием block.onscroll но как то не особо получилось), был бы вам очень благодарен за помощь в этом деле.

Ну вот пожалуй и все

@amadey18 · 05.02.2015, 15:41

arcmag,
по 1 пункту: вставите в функции с event такой код

JavaScript
1
2
e.preventDefault();
e.stopPropagation();

@arcmag · 05.02.2015, 15:56 **[ТС]**

Спасибо вам, и правда помогло

Теперь с 2 вопросом помог бы кто нибудь и можно считать что день удался

@amadey18 · 05.02.2015, 16:58

arcmag, возможно это подойдет, но я не проверял. jquery-mousewheel

Добавлено через 41 минуту
arcmag, да, он работает, но вам придется поработать над CSS ползунка.
Подключить

JavaScript
1
2
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>

и вставить

JavaScript
1
2
3
4
5
6
7
8
$(function() {
$('.wrapper').bind('mousewheel', function(event) {
event.preventDefault();
var scrollTop = this.scrollTop;
this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
//console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
});
});

@arcmag · 05.02.2015, 17:58 **[ТС]**

Спасибо, а без jQuery нет варианта? Я хотел ну чисто на джаве все сделать

@amadey18 · 06.02.2015, 08:46

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

@arcmag · 06.02.2015, 15:04 **[ТС]**

Ладно, что нибудь придумаю, спасибо.

Добавлено через 4 часа 36 минут
Упорные да будут вознаграждены

Таки справился!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка</title>
<style>
*{ padding:0px; margin:0px; box-sizing:border-box; -moz-box-sizing:border-box;}
body{background:#CCC;}
.wrapper{
    margin:5px auto;
    background:#FFF;
    width:900px;
    height:550px;
    border:solid 3px black;
    overflow:hidden;
    position:relative;
 
}
.wrapper .block{
    padding:7px 25px 7px 7px;
}
.wrapper .scrollBlock{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:13px;
    background:#CC0;
    box-shadow:inset 0px 0px 15px #FF9900;
    border-left: solid 1px black;
    display:none;
}
.wrapper .scrollicon{
    position:absolute;
    right:0px;
    top:0px;
    height:10%;
    width:13px;
    background:#09F;
    box-shadow:inset 0px 0px 7px #00FFFF;
    cursor:pointer;
    display:none;
}
.wrapper .scrollicon:active{
    outline:solid 1px white;
    box-shadow:inset 0px 0px 7px #00FFFF, 0px 0px 3px #00FFFF;
    background:#000;
}
.test{
    position:fixed;
    margin-left:-53px;
    background:#000;
    padding:10px;
    color:#FFF;
}
</style>
<script>
var wrapper, block, scrollBlock, scrollicon, nowMouse, nowMouse2, nowMouse3, testVar;
var point = false;
var point2 = false;
var scrollTop = 0;
window.onload = function(){
    wrapper = document.getElementsByClassName("wrapper").item(0);
    block = document.getElementsByClassName("block").item(0);
    scrollBlock = document.getElementsByClassName("scrollBlock").item(0);
    scrollicon = document.getElementsByClassName("scrollicon").item(0);
    test_scroll();
    scrollicon.onmousedown = icon_scroll_down;
    document.onmouseup = function(){point=false;}
    document.onmousemove = icon_scroll_move;
    wrapper.onmouseover = function(){point2=true;test_out();}
    wrapper.onmouseout = function(){point2=false;test_out();}
    wrapper.onmousewheel = mouseScrollBlock;
}
function mouseScrollBlock(e){
    if(point2){
        scrollTop+=-e.deltaY;
        if(scrollTop>0) scrollTop = 0;
        if(scrollTop<-(block.offsetHeight-wrapper.offsetHeight))
        scrollTop = -(block.offsetHeight-wrapper.offsetHeight);
        var wrapperSB = (wrapper.offsetHeight-scrollicon.offsetHeight)/100;
        var blockPercent = (block.offsetHeight-wrapper.offsetHeight)/100;
        var chProc = (scrollTop/blockPercent).toFixed(0);
        scrollicon.style.top = (chProc*-wrapperSB)+"px";
        block.style.marginTop = scrollTop+"px";
        test_out();
    }
}
function test_scroll(){ // проверка высоты блока
    if(block.offsetHeight>wrapper.offsetHeight){ 
        scrollBlock.style.display = "block"; scrollicon.style.display = "block";
        scrollBlock.style.height = block.offsetHeight+"px";
    }
    else{
        scrollBlock.style.display = "none"; scrollicon.style.display = "none";
    }
}
function icon_scroll_down(e){ //функция активации ползунка
    nowMouse = e.clientY-scrollicon.offsetTop; point=true; test_out();
}
function icon_scroll_move(e){ //функция движения ползунка
    if(point){
        e.preventDefault();
        e.stopPropagation();
        scrollicon.style.top = (e.clientY - nowMouse)+"px";
        if(scrollicon.offsetTop<0){ scrollicon.style.top=0; }
        else if(scrollicon.offsetTop>wrapper.offsetHeight-scrollicon.offsetHeight)
        scrollicon.style.top=(wrapper.offsetHeight-scrollicon.offsetHeight)+"px";
        var nowMouse3 = wrapper.offsetHeight-scrollicon.offsetHeight
        var wrapperPercent = nowMouse3/100;
        var blockPercent = (block.offsetHeight-nowMouse3)/100;
        nowMouse2 = (scrollicon.offsetTop/wrapperPercent).toFixed(2);
        block.style.marginTop = -(nowMouse2*blockPercent).toFixed(0)+"px";
        testVar = block.style.marginTop;
        test_out();
    }
}
function test_out(){
    document.getElementsByClassName("test").item(0).innerHTML = scrollTop;
}
</script>
</head>
<body>
<div class="wrapper">
    <div class="test">000</div>
    <div class="block">
<h1>HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»)</h1>
<p>Cтандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.</p>
<p>Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.</p>
<p>Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария).</p> 
<p>HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. </p>
<p>Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).</p> <p>Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег TABLE предназначен для создания в документах таблиц, но часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.</p>
<p>Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari (см.: Браузер#Рыночные доли).</p>
<p>Отличия[править | править вики-текст]
Некоторые библиотеки[3] используют сброс стилей (reset.css) для приведения в соответствие стилей по умолчанию для разных браузеров, в то время как другие[4] используют нормализацию (Normalize.css), что уменьшает количество изначального кода библиотеки.</p>
<p>Типы CSS-библиотек[править | править вики-текст]
Из-за упомянутых недостатков — использование CSS-библиотек вызывает споры в профессиональном сообществе. Также это привело к появлению различных типов CSS-библиотек. Условно можно выделить два типа: Всеобъемлющие и Ограниченные. Третьим вариантом может быть разработка собственной библиотеки[5]. Этот вариант предпочитает большинство разработчиков, так как это дает выгоды персонального решения и уменьшает негативные моменты зависимости от использования сторонних библиотек.</p>
<p>Всеобъемлющие CSS-библиотеки[править | править вики-текст]
Этот тип библиотеки пытается охватить большинство вещей, которые могут понадобиться разработчику. К этому типу отнесем библиотеки, которые включают CSS для верстки и сброса (или какую-то основу).</p>
<p>Ограниченные CSS-библиотеки[править | править вики-текст]
Как следует из названия, библиотеки этого типа охватывают лишь ограниченный объём потребностей или имеют конкретную цель.</p>
    <div class="scrollBlock"></div>
    <div class="scrollicon"></div>    
    </div>
</div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	05.02.2015, 15:56 [ТС]
	Спасибо вам, и правда помогло Теперь с 2 вопросом помог бы кто нибудь и можно считать что день удался 0

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	05.02.2015, 17:58 [ТС]
	Спасибо, а без jQuery нет варианта? Я хотел ну чисто на джаве все сделать 0

@amadey18 92 / 92 / 51 Регистрация: 29.04.2013 Сообщений: 361
	06.02.2015, 08:46
	Сообщение было отмечено arcmag как решение Решение arcmag, можете посмотреть исходники, но лучше использовать плагин, т.к. там уже учтены некоторые особенности разных браузеров на счет передвижения и определения высоты. 0

Создание своей собственной прокрутки для блока

Решение