Колонки две, скроллер один!
Вариант адаптации к разным устройствам (экранам).
На странице две колонки, но скроллируются по вертикали они независимо одним общим браузерным ползунком. Фреймов нет. При уменьшении размеров экрана (смартфон) две колонки автоматически "сворачиваются" в одну. Разрабатывалось для просмотра на Full HD (1920 px) Отдых в Турции: http://gigalit.com.ua/cirali Какие ощущения от такой навигации? |
Маэстро,
а если попробовать скролировать одновременно? |
Цитата:
Очень много сайтов на которых 2,3 визуальные колонки. При этом заполнение контентом их неравномерное. Одна колонка длинная, другая короткая. При вертикальном скроллировании наблюдаем сначала полное заполнение экрана, а потом пол-экрана занято, а другая половина - "белый лист". На экранах 1920 px вообще слева и справа по 30% пустого места. Чтобы исправить такую ситуацию попробовал новый подход. Вторая причина - после прочтения содержимого одной колонки приходится подниматься вверх, чтобы читать вторую колонку, потом третью. В данном подходе этого не нужно. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
синхронная прокрутка блоков разной высоты
Маэстро,
скролл колесом мышки, для теста "много спойлеров", покликать по любым блокам.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
#chating_wrapper{
box-sizing: border-box;
padding: 0;
height: 100%;
border: 2px #8B4513 solid;
}
.chating_history{
font-weight: bold;
}
.chating_block{
height: 150px;
border-bottom: 2px #8B4513 solid;
transition: height .3s ease-in-out;
}
.chating_block:nth-child(2n){
background-color: #CD853F;
}
.chating_block:last-child {
border-bottom: none;
}
.chating_list{
height: 100%;
width: 50%;
overflow-y: hidden;
float: left;
}
.chating_text{
padding: 4px 0 4px 46px;
}
.chating_list:nth-child(1) .chating_block
{
height: 250px;
border-right: 2px #8B4513 solid;
}
.chating_list:nth-child(1) .chating_block:nth-child(2n) {
background-color: #FF4500;
}
</style>
<title></title>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var nodes = document.querySelectorAll(".chating_list");
function wheel(event) {
var target = event.target;
if (target.closest(".chating_list")) {
var a = nodes[0].scrollHeight - nodes[0].clientHeight;
var b = nodes[1].scrollHeight - nodes[1].clientHeight;
event.preventDefault();
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
delta = delta > 0 ? -30 : 30;
if (target == nodes[0]) {
nodes[0].scrollTop += delta;
nodes[1].scrollTop =
b * nodes[0].scrollTop / a
} else {
nodes[1].scrollTop += delta / 5;
nodes[0].scrollTop = a * nodes[1].scrollTop / b
}
}
}
window.addEventListener("mousewheel", wheel, false);
window.addEventListener("DOMMouseScroll", wheel, false);
/* для теста изменить высоту, клик по любому блоку*/
window.addEventListener("click", function(event) {
var target = event.target;
if (target.closest(".chating_block")) target.style.height = 100 + (Math.random() * 700 | 0) + "px"
}, false)
});
</script>
</head>
<body>
<div id="chating_wrapper">
<div class="chating_list" >
<div class="chating_block">1</div>
<div class="chating_block">2</div>
<div class="chating_block">3</div>
<div class="chating_block">4</div>
<div class="chating_block">5</div>
<div class="chating_block">6</div>
<div class="chating_block">7</div>
<div class="chating_block">8</div>
<div class="chating_block">9</div>
<div class="chating_block">10</div>
<div class="chating_block">11</div>
<div class="chating_block">12</div>
<div class="chating_block">13</div>
<div class="chating_block">14</div>
<div class="chating_block">15</div>
<div class="chating_block">16</div>
<div class="chating_block">17</div>
<div class="chating_block">18</div>
<div class="chating_block">19</div>
<div class="chating_block">20</div>
</div>
<div class="chating_list" >
<div class="chating_block">1</div>
<div class="chating_block">2</div>
<div class="chating_block">3</div>
<div class="chating_block">4</div>
<div class="chating_block">5</div>
<div class="chating_block">6</div>
</div>
</div>
</body>
</html>
|
рони,
Да, понятно, что если принять меры, то будет как в Вашем примере. Но именно так лично мне и не нравится, когда при кручении колеса мыши двигается не только контент левой части сайта, но и правой тоже. Логика тут такая: если я читаю текст слева, то зачем двигать контент справа? |
Маэстро,
мне больше нравится, когда у каждого блока своя полоса прокрутки, а не общая как у вас, потому - что возникает вопрос: как крутить второй блок? |
Цитата:
Цитата:
на сенсорном экране прикасаетесь пальцем к контенту (левой или правой части) и двигаете вверх/вниз - скрипт сразу понимает какую сторону двигать. |
Цитата:
|
Цитата:
Если да, то я попробую их выполнить (сюда не относим всевозможные текстовые надписи типа "двигать туда", "крутить здесь", "смотреть далее" - на мой взгляд они только засоряют экран). Я исхожу из следующих практических наблюдений на сайтах: как правило, нескроллируемый блок 1. имеет ширину значительно меньшую, чем скроллируемый 2. содержит рекламный баннер или список рекламы, или меню/каталог сайта (если короткое) 3. имеет законченный вид, т.е. даже для высоты экрана 800px под собой имеет "белое поле". 4. соответственно не замечается внизу обрезания текста/таблицы/картинки. На показанном мною сайте обе колонки имеют одинаковую ширину, приблизительно равнозначный контент, видно обрезание снизу. В самом низу левой (скроллируемой по-умолчанию колонке) видна надпись: "Двухколоночный сайт с независимо скроллируемыми колонками". Раньше там было больше разъясняющего текста, но потом я его убрал, считая, что вроде бы уже должно быть понятно. |
| Часовой пояс GMT +3, время: 04:07. |