如何模擬水平滾動的固定定位但保持正常的垂直滾動？ （表格的粘性列）
[英]How can I mimic fixed positioning for horizontal scrolling but maintain normal vertical scrolling? (Sticky column for a table)
問題描述
首先讓我說我無法相信我在這方面遇到了多少麻煩。 我已經嘗試了一切都沒有運氣。 不幸的是，我有很多要求需要滿足，無法做出很多讓步。
基本上，我需要制作一個可排序的表，其第一列充當“粘性”列。 所有其他列都可以水平滾動並“進入”第一列。
現在，這是那種很簡單的。 然而，在第一列上固定定位的問題在於它不尊重它所在的 1200x600px 容器的邊界。但更重要的是，應用固定定位使得第一列難以與其余部分一起滾動文本。
一個例子：
現在，正如您想象的那樣，當您滾動時，您會看到：
從本質上講，這首先違背了擁有粘性列的全部目的。
我想要能夠做的就是讓一切都完全按照現在的方式進行，而且還要將滾動“綁定”到固定列上，以便它與表格的其余部分一起滾動。
但是，需要考慮以下幾點：
- 表格的標題需要保持原樣（即不能將所有內容放入另一個 div 並滾動它。不確定無論如何都可以使用固定定位）。
- 一切都需要可排序，因此通過將兩張桌子塞在一起（正如我在其他答案中看到的那樣），我們使這一點復雜化，未來需要左右保持某種聯系的努力。
甚至不能告訴你我有多欣賞這里的一些解決方案。 我已經為此工作了一個星期。 我已經在陽光下嘗試了每個 JS 庫，但它們的問題是這些庫中的大多數都遵循創建多個表並將一些表隱藏在頁面上的約定。 這會在滾動時引入很多延遲（尤其是大量數據時）。 如果我們能以某種方式找到一種用最少的黑客來做到這一點的方法，那將是理想的，盡管在這一點上我會嘗試任何事情。
好消息是我們總是可以依賴於每個表格單元格的固定高度和固定高度。
提前致謝！
1 個解決方案
解決方案1
1 2018-10-10 04:19:51
Hi I add another for fixed heading and you try for sorting using jquery function <!DOCTYPE HTML> <html> <head> <style> .table-scroll { position: relative; max-width: 600px; margin: auto; overflow: hidden; border: 1px solid #000; height:150px; } .table-wrap { width: 100%; overflow: auto; height:150px; } .table-scroll table { width: 100%; margin: auto; border-collapse: separate; border-spacing: 0; } .table-scroll th, .table-scroll td { padding: 5px 10px; border: 1px solid #000; background: #fff; white-space: nowrap; vertical-align: top; } .table-scroll thead, .table-scroll tfoot { background: #f9f9f9; } .clone { position: absolute; top: 0; left: 0; pointer-events: none; height:100px; } .clone th, .clone td { visibility: hidden } .clone td, .clone th { border-color: transparent } .clone tbody th { visibility: visible; color: red; } .clone .fixed-side { border: 1px solid #000; background: #eee; visibility: visible; } .clone thead, .clone tfoot { background: transparent; } </style> </head > <body> <div id="table-scroll" class="table-scroll"> <div class="table-wrap"> <table class="main-table"> <thead> <tr> <th class="fixed-side" scope="col"> </th> <th class="fixed-side" scope="col">Header 2</th> <th class="fixed-side" scope="col">Header 3</th> <th class="fixed-side" scope="col">Header 4</th> <th class="fixed-side" scope="col">Header 5</th> <th class="fixed-side" scope="col">Header 6</th> <th class="fixed-side" scope="col">Header 7</th> <th class="fixed-side" scope="col">Header 8</th> </tr> </thead> <tbody> <tr> <th class="fixed-side">Left Column</th> <td> Cell content<br> test </td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> </tbody> <tfoot> <tr> <th class="fixed-side"> </th> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> <td>Footer 5</td> <td>Footer 6</td> <td>Footer 7</td> <td>Footer 8</td> </tr> </tfoot> </table> </div> </div> <p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> jQuery(document).ready(function () { jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); }); </script> </body> </html >
解決方案2
0 2018-10-09 08:58:29
嗨ActiveModel第一個表列在下面的頁面中是粘滯的
<!DOCTYPE HTML> <html> <head> <style> .table-scroll { position: relative; max-width: 600px; margin: auto; overflow: hidden; border: 1px solid #000; } .table-wrap { width: 100%; overflow: auto; } .table-scroll table { width: 100%; margin: auto; border-collapse: separate; border-spacing: 0; } .table-scroll th, .table-scroll td { padding: 5px 10px; border: 1px solid #000; background: #fff; white-space: nowrap; vertical-align: top; } .table-scroll thead, .table-scroll tfoot { background: #f9f9f9; } .clone { position: absolute; top: 0; left: 0; pointer-events: none; } .clone th, .clone td { visibility: hidden } .clone td, .clone th { border-color: transparent } .clone tbody th { visibility: visible; color: red; } .clone .fixed-side { border: 1px solid #000; background: #eee; visibility: visible; } .clone thead, .clone tfoot { background: transparent; } </style> </head > <body> <div id="table-scroll" class="table-scroll"> <div class="table-wrap"> <table class="main-table"> <thead> <tr> <th class="fixed-side" scope="col"> </th> <th scope="col">Header 2</th> <th scope="col">Header 3</th> <th scope="col">Header 4</th> <th scope="col">Header 5</th> <th scope="col">Header 6</th> <th scope="col">Header 7</th> <th scope="col">Header 8</th> </tr> </thead> <tbody> <tr> <th class="fixed-side">Left Column</th> <td> Cell content<br> test </td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> </tbody> <tfoot> <tr> <th class="fixed-side"> </th> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> <td>Footer 5</td> <td>Footer 6</td> <td>Footer 7</td> <td>Footer 8</td> </tr> </tfoot> </table> </div> </div> <p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> jQuery(document).ready(function () { jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); }); </script> </body> </html >
我可以在網頁上劫持垂直滾動動作並將其水平移動嗎？
[英]On a webpage can I hijack the vertical scrolling action and make it horizontal?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.