Изменение стиля строчки таблицы, которая будет по центру вертикали
Итак, всем привет! Есть таблица:
<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,
:-? |
ну я вроде максимально коротко и ясно изложил задачу :D
|
Цитата:
|
Попробую другими словами:
Таблица: <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,
<!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> |
по хорошему бы еще wheel перехватить, сделать построчным.
|
Цитата:
Цитата:
|
А как сделать, чтобы при прокрутке до конца(если до низу, показывалось начало списка, и если до верху, то показывался конец списка) ? То есть чтоб был бесконечный список?
|
Часовой пояс GMT +3, время: 11:50. |