Scroll function issue in JavaScript

Question

I'm new to frond end development, and unfortunately have some issues calling a JavaScript function.

I have following function:

 <script type="text/javascript">
    $(document).ready(function () {

        $("#table_div").scroll(function () {
            alert("test successful");
            jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
            jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
            jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
        });
    });
</script>

and HTML is defined as:

<div id="divHeader" class="firstpanel">

<div id="firstcol" class="firstcolumn">

<div id="table_div" class="contentpanel">

which is styled as:

.contentpanel {
   overflow: scroll;
   width: 300px;
   height: 500px;
   position: relative;
 }

 .firstpanel {
   overflow: hidden;
   width: 284px;
 }

 .firstcolumn {
   overflow: hidden;
   height: 500px;
 }

and I'm experiencing a problem, since the "alert" in my JavaScript function is not triggered, when I debug my application. I have made a test in JSFiddle with exacly the same code, and it works very well, since the alert function is called, once I start scrolling my div.

I'm using JQuery 1.5.1 in my application and will prefer to prevent using a newer version in JQuery. Is the JQuery version the issue in this case ?.

When are you setting the listener ? Is your html already loaded ? — Gwendal
– Gwendal, Commented Mar 15, 2016 at 9:33
Yes, I just didn't include the whole script. While I'm debugging, it hits the breakpoint in line with: $("#table_div").scroll(function () { but it doesnt trigger det srolling — Osman Esen
– Osman Esen, Commented Mar 15, 2016 at 9:35
Can yo try a console.log($("#table_div")); before setting the listener just to be sure ? — Gwendal
– Gwendal, Commented Mar 15, 2016 at 9:37

Marcos Pérez Gude · Accepted Answer · 2016-03-15 09:35:22Z

1

You are attaching the event when the element is not render by DOM. You should wrap that code in a $(document).ready() or use delegation events:

$(document).on('scroll', "#table_div", function () {
   // code 
});

answered Mar 15, 2016 at 9:35

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Osman Esen Over a year ago

I have updated my JavaScript codeblock. This is how it actually looks.

Osman Esen Over a year ago

I'm trying to convert it in a format which is supported by JQuery 1.5.1. on.('scroll') is supported from JQuery 1.7

Marcos Pérez Gude Over a year ago

What's the problem in upgrade the jquery version? You are using a stone age jquery library

Osman Esen Over a year ago

It's not my own project, so I need to ask permission for this. Thus, I'll prevent it if it's possible

Collectives™ on Stack Overflow

Scroll function issue in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related