Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2016, 14:20
Кандидат Javascript-наук
Отправить личное сообщение для Invis1ble Посмотреть профиль Найти все сообщения от Invis1ble
 
Регистрация: 05.09.2010
Сообщений: 103

jQuery-плагин для стилизации прокрутки
Приветствую!

Написал давненько уже jQuery-плагин для стилизации скроллбара, но на днях сильно отрефакторил (скорее переписал с нуля).
Интересует ваше мнение как пользователей и как программистов. Что добавить, может что-то изменить/улучшить.

В планах на будущее:
  • добавить поддержку PointerEvent'ов;
  • реализовать возможность прокрутки с помощью клика по треку;
  • добавить кнопки для прокрутки в начало и конец трека.
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2016, 14:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Invis1ble,
jquery.mousewheel может убрать этот плагин?
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2016, 14:51
Кандидат Javascript-наук
Отправить личное сообщение для Invis1ble Посмотреть профиль Найти все сообщения от Invis1ble
 
Регистрация: 05.09.2010
Сообщений: 103

рони,
Мой плагин расчитан на поддержку старых браузеров, в самой первой версии я занимался нормализацией событий прокрутки колесом мыши сам. Но потом решил отказаться от этой затеи, так как есть хорошо развитый jquery.mousewheel, учитывающий множество нюансов.
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2016, 20:09
Профессор
Отправить личное сообщение для psiklop Посмотреть профиль Найти все сообщения от psiklop
 
Регистрация: 04.03.2015
Сообщений: 163

класс, в закладочки добавлю, пригодится
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2016, 07:33
Кандидат Javascript-наук
Отправить личное сообщение для Invis1ble Посмотреть профиль Найти все сообщения от Invis1ble
 
Регистрация: 05.09.2010
Сообщений: 103

Ну что, критики не будет никакой? Или лень смотреть?
Печальбеда.
Ответить с цитированием
  #6 (permalink)  
Старый 26.10.2016, 08:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Invis1ble,
есть же куча подобных плагинов с поддержкой всего и вся ...
http://areaaperta.com/nicescroll/index.html
http://jscrollpane.kelvinluck.com/index.html
Ответить с цитированием
  #7 (permalink)  
Старый 27.10.2016, 14:02
Кандидат Javascript-наук
Отправить личное сообщение для Invis1ble Посмотреть профиль Найти все сообщения от Invis1ble
 
Регистрация: 05.09.2010
Сообщений: 103

рони,
Подобных, да не подобных Где-то чего-то не хватает, где-то наоборот слишком много всего понапихали и т.п. Имхо, конечно.
Ответить с цитированием
  #8 (permalink)  
Старый 18.11.2016, 05:21
Профессор
Отправить личное сообщение для psiklop Посмотреть профиль Найти все сообщения от psiklop
 
Регистрация: 04.03.2015
Сообщений: 163

Как раз недавно делал работенку, там был небольшие элементы, хотелось сделать красиво, обычный скролл все портил, вспомнил, поставил и ничего не вышло хорошего, потом нашел еще кучу таких плагинов и со всеми какие то косяки выходили, не знаю почему, может jquery не той версии, с некоторыми были баги в консоли js, некоторые меняли свойства элемента...

сделал сам так, сунул элемент в div, которому поставил ширину на 20px меньше и overflow hidden, вертикальный скролл скрылся, но работал, сбоку нарисовал блок симпатичный, высоту ему высчитывал скриптик в зависимости от scrollHeight элемента, на событие onscroll написал скриптик, который двигал этот симпатичный блок, и даже написал небольшой скрипт (mouseup, mousemove), чтобы ухватившись за симпатичный блок менять правильно scrolltop элемента, ну а измененный scrolltop двигал симпатичный блок, получилось в обратную, все пашет, проверял везде, даже на мобилах, я доволен

Последний раз редактировалось psiklop, 18.11.2016 в 05:24.
Ответить с цитированием
  #9 (permalink)  
Старый 28.11.2016, 17:15
Кандидат Javascript-наук
Отправить личное сообщение для Invis1ble Посмотреть профиль Найти все сообщения от Invis1ble
 
Регистрация: 05.09.2010
Сообщений: 103

Сообщение от psiklop Посмотреть сообщение
вспомнил, поставил и ничего не вышло хорошего
Что это значит? Это такой офигительный багрепорт на мой плагин?
Ответить с цитированием
  #10 (permalink)  
Старый 01.01.2017, 11:56
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Invis1ble, я посмторел ваш плагин. У элемента, который содежит список, вместо overflow: auto стоит hidden и обработка события прокрутки, что ломает все "нативные" жесты на всех устройствах.

Мышь. Невозможно воспользоваться ускоренной прокруткой, зажав колесо мыши.
Вместо плавной прокрутки при повороте колеса мыши на один щелчёк, сразу перескакивает на новую позицию, и скорость прокрутки не соответствует параметрам ПК. (Т. е. если установлено, что скорость 500пкс/щелчёк, то в этом месте прокрутка кажется замедлённой, "типа тормозит")

Клавиатура. Не работают стрелки, пробел, клавиши Home, End, PageUp, PageDown.

На мобильном устройстве слегка подпрыгивает при "прокрутке".

В Safari, Chrome и в их мобильных версиях, и в Opera есть нестандартные псевдо-элементы ::-webkit-scrollbar и ::-webkit-scrollbar-thumb, которые позволяют стилизовать элементы прокрутки. http://caniuse.com/#search=scrollbar

<style>
	
	#my-box {
		overflow: auto;
		width: 300px;
		height: 300px;
	}
	
/*	дорожка*/
	#my-box::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #F5F5F5;
	}
	
/*	скроллбар целиком*/
	#my-box::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		background-color: #F5F5F5;
	}
	
/*	бегунок*/
	#my-box::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: #555;
	}
	
	.content {
		height: 2400px;
		width: 600px;
		background-color: #eee;
		background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), 
						  linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee);
		background-size: 200px 200px;
		background-position: 0 0, 100px 100px;
	}
</style>
<div id="my-box">
	<div class="content"></div>
</div>


Стилизация не наносит вреда доступности содержимого и грандиозно деградирует в Мозилле и Эксплорере. (Кстати в IE8 ваш скрипт не работает)

Удобно использовать, когда встроенная полоса прокрутки, поскольку она ведёт себя привычным для пользователя способом.
Доступность + <div> вместо полосы прокрутки = 

Последний раз редактировалось Malleys, 01.01.2017 в 13:07. Причина: WTF?! The editor don't render my unicode emoji >:(
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дополнить плагин для мозилы JS-API 10000руб Chris_Phils Работа 2 30.09.2015 13:59
Плагин для CKEditor BashOrgRu Общие вопросы Javascript 0 08.11.2013 07:22
Нужен jQuery плагин для отображения горизонтальных временных диаграмм или идея Piterskuy jQuery 8 02.10.2013 23:07
Работа для знатока jQuery virtualbrest Работа 0 24.07.2013 16:05
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00