最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - On table scroll listener - Stack Overflow

programmeradmin0浏览0评论

I'm trying to find out event of scrolling tables. I can get the left param, for example, using:

$("#scrollTable").offset().left

But I can't add the listener of its changing. Everything I want is to monitor the changing of left scroll parameter of table and apply it to another DOM element (that is not a problem).

HTML example of my table:

    <div class="scrollTableOuter">
        <div id="scrollTableInner" class="scrollTableInner">
<table id="scrollTable" class="persist-area">
    <thead>
        <tr class="persist-header">
        <th style="height: 80px;">Name</th>
        <td style="width: 80px;">
        </td>
        <td style="width: 80px;">
        </td>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th>name</th>
        <td style="text-align: center;">
        <input class="arrow-change" style="width: 35px; text-align: right;" autoplete="off" min="0" name="AwardEvent[2][3][value]" id="AwardEvent_2_3_value" type="number" value="1">
        </td>

        </tr>
    </tbody>
</table>
</div></div>

I'm trying to find out event of scrolling tables. I can get the left param, for example, using:

$("#scrollTable").offset().left

But I can't add the listener of its changing. Everything I want is to monitor the changing of left scroll parameter of table and apply it to another DOM element (that is not a problem).

HTML example of my table:

    <div class="scrollTableOuter">
        <div id="scrollTableInner" class="scrollTableInner">
<table id="scrollTable" class="persist-area">
    <thead>
        <tr class="persist-header">
        <th style="height: 80px;">Name</th>
        <td style="width: 80px;">
        </td>
        <td style="width: 80px;">
        </td>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th>name</th>
        <td style="text-align: center;">
        <input class="arrow-change" style="width: 35px; text-align: right;" autoplete="off" min="0" name="AwardEvent[2][3][value]" id="AwardEvent_2_3_value" type="number" value="1">
        </td>

        </tr>
    </tbody>
</table>
</div></div>
Share Improve this question edited Aug 1, 2013 at 10:10 AxelPAL asked Aug 1, 2013 at 9:53 AxelPALAxelPAL 1,0273 gold badges12 silver badges19 bronze badges 3
  • How are you scrolling a table? Can you post your HTML. – Rory McCrossan Commented Aug 1, 2013 at 9:55
  • Try to console it by using, console.log($("#scrollTable").offset());. And check what you get in it. – Rohan Kumar Commented Aug 1, 2013 at 9:55
  • @Rohan, i have this: Object {top: 225, left: 160} – AxelPAL Commented Aug 1, 2013 at 10:11
Add a ment  | 

1 Answer 1

Reset to default 3

You should bind a listener to the 'scroll' event, as the docs point out.

$('#target').on('scroll', function() {
    // your code
});

obviously, #target should be a selector for the element that houses the scrollbars, possibly document or a div you have on overflow

发布评论

评论列表(0)

  1. 暂无评论