Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2017, 20:37
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Колонки две, скроллер один!
Вариант адаптации к разным устройствам (экранам).
На странице две колонки, но скроллируются по вертикали они независимо одним общим браузерным ползунком. Фреймов нет. При уменьшении размеров экрана (смартфон) две колонки автоматически "сворачиваются" в одну.
Разрабатывалось для просмотра на Full HD (1920 px)

Отдых в Турции: http://gigalit.com.ua/cirali

Какие ощущения от такой навигации?
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2017, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Маэстро,
а если попробовать скролировать одновременно?
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2017, 21:08
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от рони Посмотреть сообщение
а если попробовать скролировать одновременно?
Задача как раз в том, чтобы не пробовать и не скроллировать (одновременно). Сразу отвечаю на вопрос "почему"?
Очень много сайтов на которых 2,3 визуальные колонки. При этом заполнение контентом их неравномерное. Одна колонка длинная, другая короткая. При вертикальном скроллировании наблюдаем сначала полное заполнение экрана, а потом пол-экрана занято, а другая половина - "белый лист". На экранах 1920 px вообще слева и справа по 30% пустого места. Чтобы исправить такую ситуацию попробовал новый подход.
Вторая причина - после прочтения содержимого одной колонки приходится подниматься вверх, чтобы читать вторую колонку, потом третью. В данном подходе этого не нужно.
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2017, 21:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от рони
а если попробовать скролировать одновременно?
без
Сообщение от Маэстро
а другая половина - "белый лист".
начало и конец блоков совпадают при скролинге, несмотря на их высоту
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2017, 22:46
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от рони Посмотреть сообщение
начало и конец блоков совпадают при скролинге, несмотря на их высоту
-не очень понял. например ситуация, когда и в левой, и в правой колонке сайта много спойлеров. в левой спойлеры открыл, а в правой не открыл - высота контента в левой колонке может оказаться в N-раз длинне, чем в правой. соответственно, при вертикальном скроллировании одновременно двух колонок пока вы дотянете ползунок до низа левой колонки - в правой части сайта будет отображаться "пусто-пусто".
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2017, 23:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Маэстро
будет отображаться "пусто-пусто".
не будет, вопрос только насколько это удобно.
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2017, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

синхронная прокрутка блоков разной высоты
Маэстро,
скролл колесом мышки,
для теста "много спойлеров", покликать по любым блокам.
<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 22.07.2017, 23:43
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

рони,
Да, понятно, что если принять меры, то будет как в Вашем примере. Но именно так лично мне и не нравится, когда при кручении колеса мыши двигается не только контент левой части сайта, но и правой тоже. Логика тут такая: если я читаю текст слева, то зачем двигать контент справа?
Ответить с цитированием
  #9 (permalink)  
Старый 22.07.2017, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Маэстро,
мне больше нравится, когда у каждого блока своя полоса прокрутки, а не общая как у вас, потому - что возникает вопрос: как крутить второй блок?
Ответить с цитированием
  #10 (permalink)  
Старый 23.07.2017, 00:08
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от рони Посмотреть сообщение
мне больше нравится, когда у каждого блока своя полоса прокрутки
ну, наверное это дело вкуса каждого.. но я показывал 20 человекам сайт (на вскидку не помню адрес), на котором было 5 колонок, каждая со своим ползунком/скроллером - все сказали, что это выглядит ужасно (эти "палки").

Сообщение от рони Посмотреть сообщение
возникает вопрос: как крутить второй блок?
гмм.. а в чем проблема? если мышь с левой стороны, то кручение колеса скроллирует левую колонку; переведите мышь вправо, покрутите колесо - будет скроллироваться правая колонка. или можно кликнуть по колонке. также работают клавиши Left/Right, затем Up/Down (а в новом интерфейсе youtube с двумя колонками клавиши Up/Down не работают на левой колонке с ползунком).
на сенсорном экране прикасаетесь пальцем к контенту (левой или правой части) и двигаете вверх/вниз - скрипт сразу понимает какую сторону двигать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JqGrid - скрыть показать колонки kot_k_k jQuery 1 17.02.2016 11:56
Подскажите, как вывести в один input две разные строки? Vyacheslav.Y Ваши сайты и скрипты 4 08.11.2015 11:39
Как заставить две переменные ссылаться на один и тот же объект в памяти? xtfkpi Общие вопросы Javascript 2 25.12.2014 20:43
Верстка в две колонки greatilya (X)HTML/CSS 8 05.08.2011 00:40
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29