scroll event not firing on div element in IE_问答_开发者

scroll event not firing on div element in IE

开发者 https://www.devze.com 2023-02-16 07:13 出处：网络

相关专题：asp.net jquery

I have tried everything I can think of to get this event to trigger when scrolling on the div tag. I made sure that it was actually reaching this code and it does. It never triggers when scrolling though. I also tried using .scroll(...) and .bind('scroll'...) Any thoughts on what the issue is?

$('.ScrollIEContainer').scroll(function ()
{
   var scrollPos = $(this).scrollTop();
   if (scrollPos != null && scrollPos != undefined)
   {
      $(this).contents('table.GridView').children('thead').children('tr').css({ 'top': scrollPos + 'px' });
   }
});

The goal here is to update the top position of the header in my grid view to implement fixed header scrolling.

UPDATE: I have been unable to debug any of this code with the exception of alert statements for some inexplicable reason but I was able to debug and use the watch window to c开发者_运维百科heck on my selector elements by inserting a a line of code right before it that would result in a Null Reference exception (WTF). Anyways, I looked at the dom inside my element and the onscroll event is null event after the code above is executed.

jQuery's live doesn't support scroll

Is your element dynamically added?

Edited:

Change $(this).topScroll() to $(this).scrollTop()

Here is a working example with a div. Notice that the headers position is relative to its parent. Your problem may simply lie with the thead not responding to this positioning though.

<html>
<head>
    <style type="text/css">

        .fixed-div {
            width: 200px;
            height: 100px;
            background-color: grey;
            overflow: auto;
        }

        .header {
            text-align: center;
            width: 100%;
            height: 20px;
            background-color: red;
            position: relative;
        }
    </style>

    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $(".fixed-div").scroll(function(event) {
                var y = $(this).scrollTop();
                var x = $(this).scrollLeft();
                $(".header").css({
                    top: y,
                    left: x
                });
            });

        });

    </script>
</head>

<body>
    <div class="fixed-div">
        <div class="header">Header</div>
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

</body>

</html>