стилизация скролла со смещением

[cyklop77]

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

 

страничка из трёх колонок. вёрстка готова полностью и колонки подвинуть нет возможности. при этом клиент просит добавить стилизованный левый скролл левой колонке. я пробовал некоторые js-плагины, но все они работают по принципу:

• ограничить область и отсечь при помощи overflow: hidden родной скролл
• добавить ВНУТРЬ контейнера новый(стилизованный) скролл

проблема в том, что в моём случае стилизованный скролл должен быть смещён влево за пределы контейнера, что невозможно при действующем  overflow: hidden. при этом он должен быть изъят из потока(то есть не влиять на элементы центральной колонки)

 

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

Edited April 9, 2014 by cyklop77

[Great Rash]

Есть у меня такой плагин

[cyklop77]

коммерческий продухт?)

[Modestes]

Плагинами для скрола не пользовался, поэтому не подскажу.

Как вариант на скорую руку, можно сделать так, убого правда )

 

Изменить ширину .jspPane с 160 на 180 добавляемую видимо плагином.

У блока .jspVerticalBar вместо right: 0; сделать left

 

Добавить

.jspPane {    -moz-box-sizing: border-box;    padding-left: 16px; /*Ширина скрола*/}

Если оставить падинг, то в скрипте нужно его отключить(если это опция) или удалить в коде срипта, либо применить important, что не по феншую )

Либо margin-left: 16px; чтобы не копаться в плагине, но тогда box-sizing не сработает, а тебе как я понимаю с права между баром и контентом нужен отступ.

И картинки придется малех переделать, т.к. обрезается справа или расширить блок чуть больше чем 180, а центральный сузить за счет увеличения.

Edited April 9, 2014 by Modestes

[Great Rash]

коммерческий продухт?)

Неа, сам для себя пишу, ща допилю немного и отдам. 

[cyklop77]

это было бы замечательно

[Great Rash]

Так, есть одна проблема: куда бы закинуть файл, чтобы сослаться на него, скажем на jsfiddle? Бывают хостинги для JS-файлов?

[cyklop77]

яндекс диск не?

на mail.ru есть хранилище. только там почту обязательно заводить нужно

[Great Rash]

В общем я не стал извращаться и собрал все на codepen:

 

http://codepen.io/anon/pen/aDijc/

 

Как юзать:

var options = { classPrefix: 'rScrollbar', // префикс для CSS trackV: { // опции для вертикального скролла  container: null, // контейнер для скролла  scrollDelta: 20, // на сколько будем скролить за одно нажатие на стрелку  scrollInterval: 100, // интервал в миллисекундах если зажать стрелку  track: { // опции для скроллбара   html: '', // дополнительный html (если нужен), будет вставлен внутрь контейнера   mouseOver: function() {}, // коллбеки   mouseOut: function() {},   mouseDown: function() {},   mouseUp: function() {},   mouseClick: function() {}  },  butUp: { // опции для кнопки   html: '', // дополнительный html (если нужен), будет вставлен в контейнер кнопки   mouseOver: function() {},   mouseOut: function() {},   mouseDown: function() {},   mouseUp: function() {},   mouseClick: function() {}  },  butDown: {   html: '',   mouseOver: function() {},   mouseOut: function() {},   mouseDown: function() {},   mouseUp: function() {},   mouseClick: function() {}  },  bar: { // опции ползунка   size: { // размер ползунка    min: 10,    max: 'auto'   },   html: '', // дополнительный html (если нужен)   mouseOver: function() {},   mouseOut: function() {},   mouseDown: function() {},   mouseUp: function() {},   mouseClick: function() {},   beforeDrag: function() {},   afterDrag: function() {}  }},trackH: { // все тоже самое для горизонтального контейнераcontainer: null,scrollDelta: 20,scrollInterval: 100,track: {html: '',mouseOver: function() {},mouseOut: function() {},mouseDown: function() {},mouseUp: function() {},mouseClick: function() {}},butUp: {html: '',mouseOver: function() {},mouseOut: function() {},mouseDown: function() {},mouseUp: function() {},mouseClick: function() {}},butDown: {html: '',mouseOver: function() {},mouseOut: function() {},mouseDown: function() {},mouseUp: function() {},mouseClick: function() {}},bar: {size: {	min: 10,	max: 'auto'},html: '',mouseOver: function() {},mouseOut: function() {},mouseDown: function() {},mouseUp: function() {},mouseClick: function() {},beforeDrag: function() {},afterDrag: function() {}}},afterInit: function() {}};$('.element').rScrollbar(options);

Серьёзно плагин не тестировал, но нацеливался на работу везде, начиная с ИЕ7. На мобилах работать не будет (не поддерживаются touch-события), да и вообще на мобилы не прицеливался. Если будут вопросы постараюсь помочь.

Суть моего плагина в том, что скроллбар можно поместить в отдельный контейнер (что я и продемонстрировал по ссылке - скроллбар снизу под основным контентом). Если надо классический скроллбар (как у всех), то надо просто оставить options.container = null (собственно так по умолчанию).

[cyklop77]

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

 

кроме того верхний конец ползунка немного выходит за пределы тела скролла

 

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

Edited April 9, 2014 by cyklop77

[Great Rash]

кроме того верхний конец ползунка немного выходит за пределы тела скролла

У вас там проблемы с версткой. Вы зачем-то назначили для .rScrollbar__track-v .track .track-b стиль top: 5px; поставьте вместо этого top: 0; и вылезать не будет.

 

поэтому на их месте пустое пространство. а хотелось бы чтобы скролл был и в этих местах

Опять же проблема в вёрстке. Просто замените для .rScrollbar__track-v .track стили top: 11px; bottom: 11px; на top: 0; bottom: 0;

UPD: и вообще вы тупо скопировали мой код, а вам надо было повнимательней почитать, что я написал. Вам при инициализации совершенно не нужен дополнительный html (если уж вы всё делаете через CSS 3).

 

Замените вот это:

$(function () {    $('.b-scroll-test').rScrollbar({        trackV: {            container: '#trackV',            track: {                html: '<div class="track-t" /><div class="track-b" />'            },            bar: {                html: '<div class="bar-t" /><div class="bar-b" />'            }        },        trackH: {            track: {                html: '<div class="track-l" /><div class="track-r" />'            },            bar: {                html: '<div class="bar-l" /><div class="bar-r" />'            }        }    });});

на это:

$(function () {    $('.b-scroll-test').rScrollbar({        trackV: {            container: '#trackV'        }    });});

и по новой перепишите стили.

 

Уверяю вас, у вас куча геморроя пропадёт и CSS сократится почти вдвое.

[cyklop77]

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

 

спасибо огромное. выручили