Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменение стиля строчки таблицы, которая будет по центру вертикали (https://javascript.ru/forum/events/76041-izmenenie-stilya-strochki-tablicy-kotoraya-budet-po-centru-vertikali.html)

desperate_one 28.11.2018 06:41
Изменение стиля строчки таблицы, которая будет по центру вертикали
 
Итак, всем привет! Есть таблица:
<table style="height:300px; overflow-y:auto;">
 <tr>
  <td>#1</td>
  <td>name1</td>
  <td>desc1</td>
  <td>price1</td>
 </tr>
 <tr>
  <td>#2</td>
  <td>name2</td>
  <td>desc2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>#3</td>
  <td>name3</td>
  <td>desc3</td>
  <td>price3</td>
 </tr>
 <tr>
  <td>#4</td>
  <td>name4</td>
  <td>desc4</td>
  <td>price4</td>
 </tr>
 <tr>
  <td>#5</td>
  <td>name5</td>
  <td>desc5</td>
  <td>price5</td>
 </tr>
</table>

И по ней у меня стоит задачка, нужно чтобы при прокрутке таблицы вверх/вниз строчка, которая вертикально окажется по центру меняла свой стиль: высота, шрифт и прочее. Важно как-то реализовать, чтобы самый верхний и самый нижний строки прокручивались до этого центра. Спасибо заранее!

рони 28.11.2018 08:24
desperate_one,
:-?

desperate_one 28.11.2018 08:33
ну я вроде максимально коротко и ясно изложил задачу :D

рони 28.11.2018 09:03
Цитата:
Сообщение от desperate_one
ну я вроде максимально коротко и ясно изложил задачу
подожду решения, тогда узнаю, что было в задаче.

desperate_one 28.11.2018 10:13
Попробую другими словами:
Таблица:
<table style="height:300px; overflow-y:auto;">
 <tr>
  <td>#1</td>
  <td>name1</td>
  <td>desc1</td>
  <td>price1</td>
 </tr>
 <tr>
  <td>#2</td>
  <td>name2</td>
  <td>desc2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>#3</td>
  <td>name3</td>
  <td>desc3</td>
  <td>price3</td>
 </tr>
 <tr>
  <td>#4</td>
  <td>name4</td>
  <td>desc4</td>
  <td>price4</td>
 </tr>
 <tr>
  <td>#5</td>
  <td>name5</td>
  <td>desc5</td>
  <td>price5</td>
 </tr>
</table>

По вертикальной середине таблицы находится область увеличения с фиксированным положением, при попадании в которую строка должна будет изменить высоту и размер шрифта, и при скролле таблицы, строки в области увеличения соответственно меняются и мне нужно захватывать строку которая будет попадать в эту область.

desperate_one 28.11.2018 11:01
В Этом уроке есть схожее решение как показано в их Демке. Но фокусируемый элемент сдвигается вверх или вниз в зависимости от скролла, к тому же он работает только при наведении мыши, можно ли это подправить под скролл и сделать так, чтоб фокусируемый элемент всегда был по центру, а список смещался вверх/вниз?

рони 28.11.2018 13:07
desperate_one,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
   height: 150px;
   border: 1px solid #0000FF;
   overflow-y: scroll;
    width: 340px;
  }
  .slider table{
      margin:  50px 0;
  }
  .slider table tr td{
     transition: 1s;

  }
  .big td{
       transform: scaleY(3);
  }

  </style>


</head>

<body>
<div class="slider">
 <table style="height:300px; overflow-y:auto;">
 <tr>
  <td>#1</td>
  <td>name1</td>
  <td>desc1</td>
  <td>price1</td>
 </tr>
 <tr>
  <td>#2</td>
  <td>name2</td>
  <td>desc2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>#3</td>
  <td>name3</td>
  <td>desc3</td>
  <td>price3</td>
 </tr>
 <tr>
  <td>#4</td>
  <td>name4</td>
  <td>desc4</td>
  <td>price4</td>
 </tr>
 <tr>
  <td>#5</td>
  <td>name5</td>
  <td>desc5</td>
  <td>price5</td>
 </tr>
</table>
</div>
<script>

    var element = document.querySelector('.slider');
    var tr = element.querySelectorAll('tr');
    var index = 0;
    tr[index].classList.add("big");
    element.onscroll = function() {
      var maxScoll = 1 + element.scrollHeight - element.clientHeight;
      var scroll = element.scrollTop;
      tr[index].classList.remove("big")
      index = tr.length * (scroll/maxScoll)|0;
      tr[index].classList.add("big")
    }
  </script>
</body>
</html>

j0hnik 28.11.2018 14:03
по хорошему бы еще wheel перехватить, сделать построчным.

desperate_one 28.11.2018 14:33
Цитата:
Сообщение от рони (Сообщение 499443)
desperate_one,
:-?
Цитата:
Сообщение от рони (Сообщение 499449)
desperate_one,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
   height: 150px;
   border: 1px solid #0000FF;
   overflow-y: scroll;
    width: 340px;
  }
  .slider table{
      margin:  50px 0;
  }
  .slider table tr td{
     transition: 1s;

  }
  .big td{
       transform: scaleY(3);
  }

  </style>


</head>

<body>
<div class="slider">
 <table style="height:300px; overflow-y:auto;">
 <tr>
  <td>#1</td>
  <td>name1</td>
  <td>desc1</td>
  <td>price1</td>
 </tr>
 <tr>
  <td>#2</td>
  <td>name2</td>
  <td>desc2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>#3</td>
  <td>name3</td>
  <td>desc3</td>
  <td>price3</td>
 </tr>
 <tr>
  <td>#4</td>
  <td>name4</td>
  <td>desc4</td>
  <td>price4</td>
 </tr>
 <tr>
  <td>#5</td>
  <td>name5</td>
  <td>desc5</td>
  <td>price5</td>
 </tr>
</table>
</div>
<script>

    var element = document.querySelector('.slider');
    var tr = element.querySelectorAll('tr');
    var index = 0;
    tr[index].classList.add("big");
    element.onscroll = function() {
      var maxScoll = 1 + element.scrollHeight - element.clientHeight;
      var scroll = element.scrollTop;
      tr[index].classList.remove("big")
      index = tr.length * (scroll/maxScoll)|0;
      tr[index].classList.add("big")
    }
  </script>
</body>
</html>
Супер! То что надо!

desperate_one 29.11.2018 10:14
А как сделать, чтобы при прокрутке до конца(если до низу, показывалось начало списка, и если до верху, то показывался конец списка) ? То есть чтоб был бесконечный список?

рони 29.11.2018 10:36
desperate_one,
http://www.webdesign-flash.ro/p/vu3dcar/

рони 29.11.2018 18:15
desperate_one,
может рассмотреть вертикальные 3d карусели в инете?

desperate_one 03.12.2018 06:19
Цитата:
Сообщение от рони (Сообщение 499501)
Классная идея! Но мне бы, просто добавить зацикливание к тому, что уже есть)


Часовой пояс GMT +3, время: 17:42.