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

@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>

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@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

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

Решение