Візуалізація деяких даних на сайті може вимагати наявність тільки однієї робочої області, приміром, це можуть бути блок-схеми, карта, і т. п. З цієї причини може виникнути необхідність у скролінгу робочої області. Яскравим прикладом може послужити карта GoogleMaps, на якій реалізований механізм click&scroll, іншими словами за допомогою кліка і прокручування можна переміщатися по робочій області.
Припустимо, вам треба було зробити щось подібне зі скролінгом, у мене на практиці це виявилися блок схеми, які не завжди вміщувалися в видиму частину браузера. Стандартні засоби скролінгу браузера в цьому випадку дозволяли переглядати розтягнувся до незрозумілих розмірів блок, але така справа мене не влаштовувало. Почався пошук, і було знайдено рішення, з яким я вирішив поділитися тут.
Створимо два блоки, перший з них буде вікном, це та сама видима область, другий блок на порядок більшого розміру – робоча область.
Код html:
Код css:
.frame {
width:300px;
height:300px;
overflow:hidden;
}
.content {
width:4000px;
height:4000px;
}
Далі необхідно прописати саме основне, це наш обробник на javascript. До речі в коді використовується бібліотека JQuery, це означає, що попередньо її слід підключити на сторінці.
Код javascript:
var startX = 0;
var offsetXs = 0;
var startY = 0;
var offsetYs = 0;
var onScroll = false;
$(document).ready(function(){
// запам’ятовуємо початкові координати курсору при натисканні
$(“.content”).mousedown(function(e){
startX = e.clientX;
startY = e.clientY;
onScroll = true;
});
$(document.body).mousemove(function(e){
// відбираємо події mousemove після тільки після кліка
if (onScroll){
var offsetX = offsetXs + (startX – e.clientX);
var offsetY = offsetYs+ (startY – e.clientY);
// переміщення вікна
$(“.frame”).scrollLeft(offsetX);
$(“.frame”).scrollTop(offsetY);
}
});
// записуємо координати після відпускання кнопки миші
$(document.body).mouseup(function(){
onScroll=false;
offsetXs = $(“.frame”).scrollLeft();
offsetYs = $(“.frame”).scrollTop()
});
});
Для скролінгу використовуються методи .scrollLeft ().scrollTop() бібліотеки JQuery. Стандартні скролбары при цьому відключаються в css – overflow:hidden.
Додав: htmaker, 11.10.2015 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
