Форум

desperate_one · #1 (**permalink**) 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>

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

рони · #2 (**permalink**) 28.11.2018, 08:24

desperate_one,

desperate_one · #3 (**permalink**) 28.11.2018, 08:33

ну я вроде максимально коротко и ясно изложил задачу

рони · #4 (**permalink**) 28.11.2018, 09:03

Сообщение от desperate_one

ну я вроде максимально коротко и ясно изложил задачу

подожду решения, тогда узнаю, что было в задаче.

desperate_one · #5 (**permalink**) 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 · #6 (**permalink**) 28.11.2018, 11:01

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

рони · #7 (**permalink**) 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 · #8 (**permalink**) 28.11.2018, 14:03

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

desperate_one · #9 (**permalink**) 28.11.2018, 14:33

Сообщение от рони

desperate_one,

Сообщение от рони

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 · #10 (**permalink**) 29.11.2018, 10:14

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

Форум

Справочник

Discord чат

Курсы javascript