靠近底部时滚动到div的底部

Question

I am working on a chatting service and i need the site to scroll to the bottom of the chatt, and if a person whants to scroll up, the script for scrolling down will stop. I have the chat inside a div with the id #chat_innhold, and here is my attemnt.

window.setInterval(function scrolled(o)
{
        if(o.offsetHeight + o.scrollTop > o.scrollHeight - 75)
        {
            window.setInterval=function()
                {
                return false;
                }
        }
        else
        {
            window.setInterval=function()
                {
                $("html, #chat_innhold").animate({ scrollTop: $('#chat_innhold').prop("scrollHeight")}, 'slow');
                }
        }
}, 1000);

When i am 75 pixels above bottom, a want to stop the scroll to bottom function.

Answer 1

为什么要覆盖window.setInterval？

Answer 2

If I understood correctly, you need something like that

<div class="wrapper">
  <button>Go to bottom</button>
  <button class="go-top">Go to top</button>
</div>

body,
.wrapper {
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  height: 1000px;
}
.go-top {
     bottom: 0;
    position: absolute;
    left: 0;
}

var elem = $('.wrapper')[0];
if (elem.addEventListener) {
  if ('onWheel' in document) {
    // IE9+, FF17+, Ch31+
    elem.addEventListener("wheel", onWheel);
  } else if ('onmousewheel' in document) {
    // old variant
    elem.addEventListener("mousewheel", onWheel);
  } else {
    // Firefox < 17
    elem.addEventListener("MozMousePixelScroll", onWheel);
  }
} else { // IE8-
  elem.attachEvent("onmousewheel", onWheel);
}

function onWheel(e) {
  e = e || window.event;
  var delta = e.deltaY || e.detail || e.wheelDelta;
    if(delta < 0 || delta > 0) {
        $('html, body').stop();
  }
}

var deltaWindowBodyHeight = $('body').height() - $(window).height();

function goToBottom() {
  $('html, body').animate({
        scrollTop: deltaWindowBodyHeight - 75
    }, 1000);
}
function goToTop() {
  $('html, body').animate({
        scrollTop: 0
    }, 1000);
}
$('button').click(function() {
if($(this).hasClass('go-top')) {
    goToTop();
} else {
    goToBottom();
}
});

JSFiddle example