私はこれを実装したばかりで、おそらくあなたは私のアプローチを使用できます。
次のHTMLがあるとします。
<div id="out" style="overflow:auto"></div>
次に、下にスクロールしたかどうかを確認できます。
var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
scrollHeightは、オーバーフローのために表示されない領域を含む、要素の高さを提供します。clientHeightは、CSSの高さ、または要素の実際の高さを表します。どちらのメソッドもなしmarginで高さを返すので、心配する必要はありません。scrollTopは、垂直スクロールの位置を示します。0は上、maxは要素のscrollHeightから要素の高さを引いたものです。スクロールバーを使用する場合、スクロールバーを一番下まで下げるのは（私にとってはChromeでした）難しい場合があります。だから私は1pxの不正確さで投げました。したがってisScrolledToBottom、スクロールバーが下から1pxの場合でもtrueになります。これは、自分にとって適切と思われるものに設定できます。
次に、要素のscrollTopを一番下に設定するだけです。
if(isScrolledToBottom)
out.scrollTop = out.scrollHeight - out.clientHeight;
私はあなたに概念を示すためにフィドルを作りました：http : //jsfiddle.net/dotnetCarpenter/KpM5j/
編集：いつでisScrolledToBottomあるかを明確にするためにコードスニペットを追加しましたtrue。
スクロールバーを下に固定
const out = document.getElementById("out")
let c = 0
setInterval(function() {
// allow 1px inaccuracy by adding 1
const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1
const newElement = document.createElement("div")
newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight, 'Scroll position:', out.scrollTop)
out.appendChild(newElement)
// scroll to bottom if isScrolledToBottom is true
if (isScrolledToBottom) {
out.scrollTop = out.scrollHeight - out.clientHeight
}
}, 500)
function format () {
return Array.prototype.slice.call(arguments).join(' ')
}
#out {
height: 100px;
}
<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>
{position : relative; bottom:0;}ます。ユーザーがスクロールしたら、cssプロパティを削除します。