22.07.2017, 20:37
|
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
|
Колонки две, скроллер один!
Вариант адаптации к разным устройствам (экранам).
На странице две колонки, но скроллируются по вертикали они независимо одним общим браузерным ползунком. Фреймов нет. При уменьшении размеров экрана (смартфон) две колонки автоматически "сворачиваются" в одну.
Разрабатывалось для просмотра на Full HD (1920 px)
Отдых в Турции: http://gigalit.com.ua/cirali
Какие ощущения от такой навигации? |
|
22.07.2017, 20:58
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Маэстро,
а если попробовать скролировать одновременно?
|
|
22.07.2017, 21:08
|
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
Сообщение от рони
|
|
а если попробовать скролировать одновременно?
|
Задача как раз в том, чтобы не пробовать и не скроллировать (одновременно). Сразу отвечаю на вопрос "почему"?
Очень много сайтов на которых 2,3 визуальные колонки. При этом заполнение контентом их неравномерное. Одна колонка длинная, другая короткая. При вертикальном скроллировании наблюдаем сначала полное заполнение экрана, а потом пол-экрана занято, а другая половина - "белый лист". На экранах 1920 px вообще слева и справа по 30% пустого места. Чтобы исправить такую ситуацию попробовал новый подход.
Вторая причина - после прочтения содержимого одной колонки приходится подниматься вверх, чтобы читать вторую колонку, потом третью. В данном подходе этого не нужно. |
|
22.07.2017, 21:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от рони
|
|
а если попробовать скролировать одновременно?
|
без
|
Сообщение от Маэстро
|
|
а другая половина - "белый лист".
|
начало и конец блоков совпадают при скролинге, несмотря на их высоту |
|
22.07.2017, 22:46
|
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
|
Сообщение от рони
|
|
начало и конец блоков совпадают при скролинге, несмотря на их высоту
|
-не очень понял. например ситуация, когда и в левой, и в правой колонке сайта много спойлеров. в левой спойлеры открыл, а в правой не открыл - высота контента в левой колонке может оказаться в N-раз длинне, чем в правой. соответственно, при вертикальном скроллировании одновременно двух колонок пока вы дотянете ползунок до низа левой колонки - в правой части сайта будет отображаться "пусто-пусто". |
|
22.07.2017, 23:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от Маэстро
|
|
будет отображаться "пусто-пусто".
|
не будет, вопрос только насколько это удобно. |
|
22.07.2017, 23:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
синхронная прокрутка блоков разной высоты
Маэстро,
скролл колесом мышки,
для теста "много спойлеров", покликать по любым блокам.
<!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>
|
|
22.07.2017, 23:43
|
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
|
рони,
Да, понятно, что если принять меры, то будет как в Вашем примере. Но именно так лично мне и не нравится, когда при кручении колеса мыши двигается не только контент левой части сайта, но и правой тоже. Логика тут такая: если я читаю текст слева, то зачем двигать контент справа?
|
|
22.07.2017, 23:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Маэстро,
мне больше нравится, когда у каждого блока своя полоса прокрутки, а не общая как у вас, потому - что возникает вопрос: как крутить второй блок?
|
|
23.07.2017, 00:08
|
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
|
Сообщение от рони
|
|
мне больше нравится, когда у каждого блока своя полоса прокрутки
|
ну, наверное это дело вкуса каждого.. но я показывал 20 человекам сайт (на вскидку не помню адрес), на котором было 5 колонок, каждая со своим ползунком/скроллером - все сказали, что это выглядит ужасно (эти "палки").
|
Сообщение от рони
|
|
возникает вопрос: как крутить второй блок?
|
гмм.. а в чем проблема? если мышь с левой стороны, то кручение колеса скроллирует левую колонку; переведите мышь вправо, покрутите колесо - будет скроллироваться правая колонка. или можно кликнуть по колонке. также работают клавиши Left/Right, затем Up/Down (а в новом интерфейсе youtube с двумя колонками клавиши Up/Down не работают на левой колонке с ползунком).
на сенсорном экране прикасаетесь пальцем к контенту (левой или правой части) и двигаете вверх/вниз - скрипт сразу понимает какую сторону двигать. |
|
|
|
