Перехват страницы прокрутки, как Google Plus? - PullRequest
Новая
       26

Перехват страницы прокрутки, как Google Plus?

4 голосов
/ 03 августа 2011

1) Если у вас есть учетная запись Google Plus, перейдите на домашнюю страницу.

2) Справа находится список кнопок «Добавить в круг», на которые можно навести курсор.

3) Обратите внимание, что при наведении курсора на одно из раскрывающегося списка «Добавить в круг» (если у вас достаточно кругов для прокрутки в раскрывающемся списке), функция прокрутки страницы отключается.Допускается только вертикальная прокрутка в раскрывающемся списке.

Как это сделать с помощью JavaScript?

enter image description here

Я могу прокрутить здесь (полоса прокрутки справа), но не может прокручивать тело страницы, пока оно не выпало.

Ответы [ 3 ]

9 голосов
/ 03 августа 2011

Элемент имеет фиксированную высоту и автоматическое переполнение, они оформляют полосу прокрутки с помощью этого трюка: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

Вы можете заставить его работать в FF и IE, чтобы: По сути, вы вкладываете элемент с автоматическим переполнением в другой и скрываете полосу прокрутки с отрицательным полем. Затем вы фиксируете событие прокрутки на этом же элементе и настраиваете ползунок на правой стороне в соответствии с положением scrollTop.

Вот как бы я это сделал: http://jsfiddle.net/kGbbP/4/

Но есть много плагинов jquery, которые могут сделать это: http://www.net -kit.com / JQuery-заказ ScrollBar-плагинов /

8 голосов
/ 08 сентября 2011

это не сделано с помощью JavaScript!

Это чистый CSS, и он работает только в (не мобильных) браузерах на основе webkit.

Вот код CSS, просто включите его в файл CSS, присоедините его к документу HTML и запустите файл .html. Вот демо: http://jsfiddle.net/3ZqGu/

А вот код CSS: 

::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{ 
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}
0 голосов
/ 05 июля 2013

я натолкнулся на эту ссылку, я попробовал это отлично работает

Стиль Google Plus Scroll

...