0

I added a scroll binding to my body tag

<body style="" data-bind="event : { scroll: scrollingInboxMessagesBox }">

and its corresponding listener

model.scrollingInboxMessagesBox = function (data,event) {

    var body = $('body');

    if (body.scrollTop == (body.scrollHeight - body.offsetHeight)) //scrollTop is 0 based
    {
        alert('Reached the bottom!');
    }

    console.log("body " + body.scrollHeight - body.offsetHeight);
    console.log($("body").scrollTop());

};

but i noticed the even never fires the listeners, when i try other events like "mouseover", it works. why is this ?

Ray
  • 3,693
  • 7
  • 24
  • 33
Thanus
  • 331
  • 5
  • 14
  • 'Scroll' event definitely works on 'body' element. Seems like a bug with knockout.js itself with regards to binding that event to 'body'. – PriyankJ Aug 17 '18 at 00:51

1 Answers1

0

Use the mousewheel event instead of scroll, as suggested by this answer.

var viewModel = function(){
  var self = this;
  self.scrollingInboxMessagesBox = function (data,event) {
      //console.log('hi');
      var body = $('body')[0];

      if (body.scrollTop == (body.scrollHeight - body.offsetHeight))        //scrollTop is 0 based
      {
          alert('Reached the bottom!');
      }

      console.log("body " + (body.scrollHeight - body.offsetHeight));
      console.log($("body").scrollTop());

  };
};

ko.applyBindings(new viewModel());
body {
 height : 200vh
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-bind="event : { mousewheel: scrollingInboxMessagesBox }">
    </body>
Ray
  • 3,693
  • 7
  • 24
  • 33
  • there is a big problem with this code, what if someone moves the scroll bar as a way to scroll, the event wouldnt be fired – Thanus Aug 17 '18 at 08:46