Два способи, як зробити вертикальний і горизонтальний скрол div а через jquery і не тільки,

Іноді буває просто необхідно зробити на сторінці блок, який би мав свою смугу прокрутки. Звичайно тут згадуються фрейми, але за те, що вони давно вже віджили своє, вони нам не підходять. Хотілося б яке-небудь рішення, де звичайному div'у можна було б присобачить скролл. І таке рішення є, і не одна, а все з використанням можливостей AJAX.

Вертикальний скролл за допомогою jScrollPane

загальні слова

маленькі хитрощі

Плагін я використовував в практиці кілька разів. Один з таких прикладів можна бачити по посиланню. Зовнішній вигляд його нестандартний, що є добре - можна ліпити, все що душі завгодно (душі, батенька, а замовникам, замовникам - прим.ред.).

Іноді плагін вимагає установки дополнітельнийх плагінів, щоб працювало коліщатко миші для скролла і щоб змінювався розмір скролінгу в залежності від кількості контенту. Але, як показала практика, все працює і без них. Звичайно, може у мене збірка плагіна якась поспішають, але навряд чи, качав з офіційного здається.

Зовсім одробно розбирати код не буду, в принципі нічого складного там немає. Однак на деяких моментах зупинюся.

HTML-файл. Структура блоку зі скролл наступна

Є зовнішній div з класом, є внутрішній div з ідентифікатором і обов'язковим класом scroll-pane. Усе. Виклик функції здійснюється в такий спосіб:

При виклик зазначаються різні параметри, типу ширини скроллбар (scrollbarWidth), розміру його стрілок (arrowSize) і так далі. Основні з них такі:

scrollbarWidth [число] - ширина скролінгу (за замовчуванням 10)

scrollbarMargin [число] - відступ зліва від скроллбар (за замовчуванням 5)

wheelSpeed ​​[число] - швидкість колеса прокрутки в пікселях (за умовчанням 18)

showArrows [логічне] - показувати графічні стрілочки чи ні (за замовчуванням false)

arrowSize [число] - висота стрілочки, якщо showArrows = true (розраховується через CSS, якщо не вказана)

dragMinHeight [число] - мінімальна висотка бігунка (за замовчуванням 0)

dragMaxHeight [число] - максимальна висота бігунка (за замовчуванням 99999!)

scrollbarOnLeft [логічне] - якщо скроллбар потрібен зліва, ставимо true.

Тепер відкриємо файл jscroll.css. Дивимося наступні рядки.

8-15 рядка. Внутрішньому div'у ставимо ширину і висоту (!), Оверфлоу (не обов'язково параметр здається), паддінг швидше за все знадобиться, інше неважливо.

17-19 рядки. Зовнішній div. Ось йому ні в якому разі не можна прописувати висоту. і обов'язково потрібно вказувати float: left. Все це робиться з однією метою - щоб Опера 10 нормально працювала зі скролл. Якщо це не дотримати, то скролл діва буде синхронний зі скролл браузера і в підсумку вийде повна нісенітниця. Пам'ятайте про це.

23-57 рядки. Стилі картинок для скролла

Зміна інших рядків по ідеї не потрібно.

Вертикальний і горизонтальний скролл на FleXcroll

Не так ознайомився з цим скриптом. Він йде без використання jQuery, що є плюсом (не завжди ж jQuery потрібен). Другим плюсом буде те, що є горизонтальний скрол. Третій плюс полягає в тому, що в архіві з плагіном прикладені приклади використання, причому хороші, різнопланові, за що великий респект.

З плагіном на проектах працювати не доводилося, але перше знайомство виявилося приємним. Єдиний помічений мінус полягає в тому, що при наведенні мишкою курсор чи не перетворюється в "ручку". Мені здається це мінус, так як інтуїтивно незрозуміло може бути скролл це чи ні. Однак, на мою думку, через css все виправити не буде проблем.

На завершення

Єдиний помічений мінус полягає в тому, що при наведенні мишкою курсор чи не перетворюється в "ручку". Мені здається це мінус, так як інтуїтивно незрозуміло може бути скролл це чи ні.

Якщо інтуїтивно незрозуміло що це скролл - нафіг такий скролл. Юзер розбиратися не буде Мене ось ця 'ручка' напружує

ЗИ. в прикладі вміст не скролліруется коліщатком мишки - ось це ВЕЛИКИЙ мінус!

Особисто я флекскроллом не користувався, але майже не сумніваюся, що в CSS можна прописати потрібних елементів cursor: pointer і справа в капелюсі =)

перевірив всі приклади, працює скролл, став побраузерно проходити, наткнувся в Лисиці, що не працює. Справа в тому, що для скролінгу в деяких браузерах потрібен доп.плагін jQuery Mousewheel. Так що приклад виправив. Спасибі за те, що помітили =)

Не підкажете чи Скрполл зробити як браузері допомогою DIV розтягнути на все вікно зі скроллингом вашим, я молодий в CSS ще погано розумію в позиціонування 3 дні експериментував не чого не вийшло то скролл пропадав то каша виходило використовував Ширину і Висоту в% і px

мені цікаво я такий довгий або це не можливо домогтися в CSS?

Завчасно дякую за відповідь.
-
З повагою, Дмитро.

вітаю!
наскільки зрозумів питання, потрібен звичайний скролл засобами css? тоді треба контейнеру прописати розміри (висоту обов'язково) і overflow: scroll. Усе

DIV
height: 98%; / * Висота блоку * /
width: 99%; / * Ширина блоку * /
overflow: auto; / * Додаємо смуги прокрутки * /
padding-left: 15px; / * Відступ від тексту зліва * /
background-attachment: fixed;
background: # 000000 / * Колір фону * /
url ( 'Fon-OPA-1.jpg') / * Шлях до фонового зображення * /
no-repeat; / * Повторювати фон по вертикалі * /
>

BODY background-attachment: fixed;
background-image: url ( '1.jpg'); / * Шлях до фонового зображення * /
>

#layer left: 0px; / * Положення від лівого краю * /
top: 0px; / * Положення від верхнього краю * /
bottom: 0px; / * Відстань від нижнього краю вікна браузера * /
position: absolute; / * Абсолютне позиціонування * /
padding: 7px; / * Поля навколо тексту * /
border: solid 0px black; / * Параметри рамки * /
>

Може іза того не виходить що використовую Google Chrome браузер?

що не виходить то? прилаштувати джейскролл? або флексскролл?

раджу завантажити приклад по посиланню (типу через "Зберегти сторінку") і просто підганяти приклад під свої потреби. іноді так простіше, ніж намагатися з одного прикладу рядки переносити в інший

Хотів зробити на своїй сторінці гарний скролінг, зі своїм видом - знайшов цю тему і довго б'юся, але не виходить замінити дизайн смуги прокрутки.
Але мені не зрозуміти, це працює то до в DIVe в самому BODY не працює? Я не знаю!.
Скачав приклад і намагався впровадити до себе на сторінку, розтягнути DVI до кордонів браузері, що б той дизайн смуги яка в прикладі встала на те місце тієї де розташований смуга самого браузера ...
ось над чим я б'юся ..
Буду вдячний тому хто пояснить як замостити смугу на сколлінг браузера.
Наперед дякую.

З повагою, Дмитро!

Доброго вам дня.
Перш за все хочу сказати спасибі за те, що ведете цей блог. Новомосковський вже пару днів. Хороша подача інформації.

І тут же запитати: скачала ваш приклад jScroll, все працює. Радує.
Питання полягає ось у чому: в цьому прикладі (як, напевно, скрізь) повзунок масштабується в залежності від кількості інфо в блоці.
Чи можливо зробити так, щоб повзунок не змінився (не розтягувати)?

А використовувалася залежність довжини всієї смуги прокрутки до довжини блоку?

Завчасно дякую за відповідь.

Велике спасибі за відгук!

Так можна! Не пам'ятаю точно, як, але, якщо не помиляюся, там можна задавати мінімальну та максимальну довжину повзунка і в цьому випадку необхідно в якості одного і іншого параметра вказати одне і те ж число.

Сенкс, будемо далі копатися. )