오버 플로우는 사용자가 스크롤 맨 아래까지 스크롤 DIV하지 않는 한 계속

해결법

1.이 당신을 도울 수 있습니다

이 당신을 도울 수 있습니다

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[편집] 주석에 맞게 ...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

컨텐츠가 추가 될 때마다 () 함수를 호출 updateScroll 또는 타이머를 설정 :

//once a second
setInterval(updateScroll,1000);

업데이트 할 경우에만 사용자가 이동하지 않은 경우 :

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

2.난 단지 CSS와 함께이 작업을 얻을 수 있었다.

난 단지 CSS와 함께이 작업을 얻을 수 있었다.

트릭은 사용 표시하는 것입니다 : 플렉스; 플렉스 방향 : 컬럼 - 역방향

브라우저의 상단과 같은 바닥을 취급합니다. 당신이 지원 플렉스 박스를 타겟팅하는 브라우저를 가정 할 때, 유일하게주의해야 할 점은 마크 업이 역순이어야한다는 것입니다.

다음은 작업 예입니다. https://codepen.io/jimbol/pen/YVJzBg
3.난 그냥이 구현 아마도 당신은 나의 접근 방식을 사용할 수 있습니다.

난 그냥이 구현 아마도 당신은 나의 접근 방식을 사용할 수 있습니다.

우리는 다음과 같은 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 높이를 제공하거나 다른 방법으로 말했다. 당신이 그것에 대해 걱정할 필요가 없다, 그래서 두 가지 방법은, 여백없이 높이를 반환합니다. scrollTop 당신에게 수직 스크롤의 위치를 제공합니다. 상위 0이고 최대 요소 마이너스 소자 자체의 높이 scrollHeight이다. 스크롤을 사용하는 경우가 어려울 수 있습니다 모든 방법을 아래로 스크롤을 얻기 위해 (나를 위해 크롬에 있었다). 그래서 나는 1 픽셀의 부정확성에 던졌다. isScrolledToBottom 사실이 될 것이다 그래서 스크롤이 바닥에서 1 픽셀의 경우에도. 당신은 당신이 바로 느낌이 어떤이를 설정할 수 있습니다.

그럼 간단하게 아래로 요소의 scrollTop을 설정하는 문제이다.
```
if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;
```
http://jsfiddle.net/dotnetCarpenter/KpM5j/ : 당신이 개념을 보여주기 위해 나는 바이올린을 만들었습니다

편집하다: 추가 된 코드는 isScrolledToBottom에 해당하는 경우 명확하게 니펫을.

아래로 스틱 스크롤 외부에서 const = document.getElementById를 ( "아웃") C = 0하자 하여 setInterval (함수 () { // 1을 추가하여 1 픽셀의 부정확성을 허용 CONST isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1 const를 newElement = document.createElement ( "DIV") newElement.textContent = 형식 (C ++, '하단 위치 :'out.scrollHeight - out.clientHeight, '스크롤 위치 :'out.scrollTop) out.appendChild (newElement) // 아래로 스크롤 isScrolledToBottom 사실 인 경우 경우 (isScrolledToBottom) { out.scrollTop = out.scrollHeight - out.clientHeight } } 500) 함수 형식 () { 반환 Array.prototype.slice.call (인수) .join ( '') } #밖 { 높이 : 100 픽셀; } < "자동 오버 플로우"스타일 = "밖으로"DIV ID => 명확합니다 : 우리는 모든 방법을 아래로 스크롤 한 경우 스크롤이 바닥에 충실하고자합니다. 우리가 스크롤하면 우리는 콘텐츠를 이동하지 않습니다.

4.

$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

라이브 데모 : http://jsfiddle.net/KGfG2/

5.2020 년, 당신은 CSS 스냅을 사용할 수 있지만, 크롬 (81) 레이아웃이 변경되기 전에 트리거 다시 스냅, UI가 크롬 81에서 작동 채팅 순수 CSS는, 또한 당신은 할 수 있습니까 CSS를 사용 스냅을 확인할 수 없습니다.

2020 년, 당신은 CSS 스냅을 사용할 수 있지만, 크롬 (81) 레이아웃이 변경되기 전에 트리거 다시 스냅, UI가 크롬 81에서 작동 채팅 순수 CSS는, 또한 당신은 할 수 있습니까 CSS를 사용 스냅을 확인할 수 없습니다.

볼이 효과를 볼 수 아래로 스크롤하면이 데모는 마지막 요소를 스냅됩니다.

.container { 오버플 Y : 스크롤; 오버 스크롤-행동 Y : 포함; 스크롤 스냅 형 : 예 근접; } .container> DIV> DIV : 마지막 아이 { 스크롤 스냅인 정렬 : 끝; } .container> DIV> DIV { 배경 : lightgray; 높이 : 3rem; 폰트 크기 : 1.5rem; } .container> DIV> DIV : n 번째 자녀 (2N) { 배경 : 회색; }

1
2
3
4
5

편집하다

사용 스크롤 스냅 형 : 예 근접 ;, 쉽게 스크롤.

6.

$('#div1').scrollTop($('#div1')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);

7..cont { 높이 : 100 픽셀; 오버 플로우 엑스 : 숨겨진; 오버 플로우-Y : 자동; 변환 : 회전 (180도)를; 방향 : RTL; 텍스트 정렬은 : 왼쪽; } UL { 오버 플로우 : 숨겨진; 변환 : 회전 (180도)를; }

0
1
2
3
4
5
6
7
8
9
10

.cont { 높이 : 100 픽셀; 오버 플로우 엑스 : 숨겨진; 오버 플로우-Y : 자동; 변환 : 회전 (180도)를; 방향 : RTL; 텍스트 정렬은 : 왼쪽; } UL { 오버 플로우 : 숨겨진; 변환 : 회전 (180도)를; }

0
1
2
3
4
5
6
7
8
9
10

기본 오버 플로우가 위에서 아래로 스크롤합니다.

변환 : 회전 (180도)을가 스크롤 부하 동적 블록 아래쪽에서 위쪽으로 할 수있다.

https://blog.csdn.net/yeshennet/article/details/88880252
8.
```
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;
```
동적 내용이 사업부에 추가되는 경우에도 그 스크롤러는 항상 바닥 위치에있을 것입니다 이렇게하면 $ (문서) .height의 () 속성을 사용 #yourDivID의 높이에서 ScrollTop 위치를 계산합니다. 도움이 되었기를 바랍니다. 그러나 그것은 또한 우리가 이동하는 경우에도 작은 버그를 가지고 있으며, 자동 하단 위치로 올 것이다 스크롤러에서 마우스 포인터를 둡니다. 누군가가 저를 해결 할 수 있다면 또한 좋을 것이다.
9.여기에 라이언 헌트에 의해 블로그 포스트 기반으로하는 솔루션이다. 그것은 스크롤 콘텐츠 하단 요소에 스크롤 위치 핀 오버플 앵커 CSS 속성에 의존한다.

여기에 라이언 헌트에 의해 블로그 포스트 기반으로하는 솔루션이다. 그것은 스크롤 콘텐츠 하단 요소에 스크롤 위치 핀 오버플 앵커 CSS 속성에 의존한다.

addMessage 함수 () { CONST $ 메시지 = document.createElement ( 'DIV'); $ message.className = '메시지'; $ message.innerText = '랜덤 번호 = $ {Math.ceil (인 Math.random () * 1000)'}; $ messages.insertBefore ($ 메시지, $ 앵커); // 트리거 할 때 스크롤 오버 플로우를 고정 스크롤을 만약 (! 범람) { 넘쳐 = isOverflowing ($ 스크롤러); $ scroller.scrollTop = $ scroller.scrollHeight; } } 기능 isOverflowing ($ 엘) { $ el.scrollHeight> $ el.clientHeight를 반환; } CONST $ 스크롤 = document.querySelector ( '스크롤.'); CONST $ 메시지 = document.querySelector ( '메시지를 표시합니다.'); CONST $ 앵커 = document.querySelector ( '앵커.'); 범람하자 = 거짓; 하여 setInterval (addMessage 1000); .scroller { 오버 플로우 : 자동; 높이 : 90vh; 최대 높이 : 11em; 배경 : # 555; } .messages> * { 오버 플로우 앵커 : 없음; } .anchor { 오버 플로우 앵커 : 자동; 높이 : 1 x 1 픽셀; } .메시지 { 마진 : .3em; 패딩 : .5em는; 배경 : #eee; } <섹션 클래스 = "스크롤">

오버 플로우 앵커는 현재 사파리에서 작동하지 않습니다.
10.
```
//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;
```
여기 내 버전은 dotnetCarpenter의 답변에 따라입니다. 무슨 일이 일어나고하는 내용 높이가 큰 경우 우리는 여분의 거리 아래로 스크롤 컨테이너가 원하는 결과를 달성하는 것입니다 .. 내 접근 방식은 순수 jQuery를 내가 일을 좀 명확하게하기 위해 변수를 지명했다.

IE와 크롬에서 작동 ..
11.그것은 실제로 당신이 위로 스크롤하고 아래로 스크롤하지 않는 동안, 그것은 또한 순수 CSS 때문에 짐 홀 (Jim Hall)의 대답은보다 더 낫다이다.

그것은 실제로 당신이 위로 스크롤하고 아래로 스크롤하지 않는 동안, 그것은 또한 순수 CSS 때문에 짐 홀 (Jim Hall)의 대답은보다 더 낫다이다.

매우 불행히도 그러나이 안정된 솔루션이 아닌 크롬을 (아마도 인해 상기 dotnetCarpenter 설명 1-PX-이슈) scrollTop도 (소자 추가시) 사용자의 개입없이 1 개 화소에 의해 부정확하게 동작. 당신은 scrollTop = scrollHeight 설정할 수 있습니다 - clientHeight, 그러나 다른 요소는 일명 더 이상 작동하지 않는 기능 "아래에 자신을 유지"를 추가 할 때 그 위치에 사업부를 유지합니다.

그래서, 짧은에, 자바 스크립트의 작은 금액을 추가 (한숨)이 문제를 해결하고 모든 요구 사항을 충족합니다 :

이 https://codepen.io/anon/pen/pdrLEZ (COO 의해 예) 비슷해, 또한, 목록은 다음의 요소를 추가 한 후 :
```
container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}
```
여기서 (29)은 한 라인의 높이이다.

(즉도 가능? 경우) 사용자가 반 라인을 스크롤 할 때 그래서, 자바 스크립트는 그것을 무시하고 아래로 스크롤합니다. 그러나 나는이 neglectible 것 같다. 그리고, 그것은 크롬 1 픽셀 꼬추를 해결합니다.
12.당신은 이런 식으로 뭔가를 사용할 수 있습니다

당신은 이런 식으로 뭔가를 사용할 수 있습니다
```
var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);
```
13.여기에 내가 그것을 접근 방법이다. 내 DIV 높이는는 650입니다. 나는 스크롤 높이가 바닥의 150 픽셀 이내이면 그 후 자동이 스크롤로 결정했다. 다른 사용자를 위해 그것을 둡니다.

여기에 내가 그것을 접근 방법이다. 내 DIV 높이는는 650입니다. 나는 스크롤 높이가 바닥의 150 픽셀 이내이면 그 후 자동이 스크롤로 결정했다. 다른 사용자를 위해 그것을 둡니다.
```
if (container_block.scrollHeight - container_block.scrollTop < 800) {
                    container_block.scrollTo(0, container_block.scrollHeight);
}
```

from https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 추가 / jQuery로 자바 스크립트 객체에서 항목을 제거 (0)	2020.10.23
[JQUERY] 어떻게 순수 JS 또는 jQuery를 함께 이스케이프 키를 누르 감지? (0)	2020.10.23
[JQUERY] JQuery와 모바일 / 폰갭를 함께 사용의 올바른 방법은? (0)	2020.10.23
[JQUERY] 데이터가로드 된 후 어떻게있는 jqGrid의 열 너비를 조정하려면? (0)	2020.10.23
[JQUERY] 대신 토글`어떻게 사용하는 (...)`> 1.8 jQuery를에? (0)	2020.10.23

복붙노트

[JQUERY] 오버 플로우는 사용자가 스크롤 맨 아래까지 스크롤 DIV하지 않는 한 계속

오버 플로우는 사용자가 스크롤 맨 아래까지 스크롤 DIV하지 않는 한 계속

해결법

1.이 당신을 도울 수 있습니다

2.난 단지 CSS와 함께이 작업을 얻을 수 있었다.

3.난 그냥이 구현 아마도 당신은 나의 접근 방식을 사용할 수 있습니다.

4.

5.2020 년, 당신은 CSS 스냅을 사용할 수 있지만, 크롬 (81) 레이아웃이 변경되기 전에 트리거 다시 스냅, UI가 크롬 81에서 작동 채팅 순수 CSS는, 또한 당신은 할 수 있습니까 CSS를 사용 스냅을 확인할 수 없습니다.

6.

7..cont { 높이 : 100 픽셀; 오버 플로우 엑스 : 숨겨진; 오버 플로우-Y : 자동; 변환 : 회전 (180도)를; 방향 : RTL; 텍스트 정렬은 : 왼쪽; } UL { 오버 플로우 : 숨겨진; 변환 : 회전 (180도)를; }

0
1
2
3
4
5
6
7
8
9
10

8.

9.여기에 라이언 헌트에 의해 블로그 포스트 기반으로하는 솔루션이다. 그것은 스크롤 콘텐츠 하단 요소에 스크롤 위치 핀 오버플 앵커 CSS 속성에 의존한다.

10.

11.그것은 실제로 당신이 위로 스크롤하고 아래로 스크롤하지 않는 동안, 그것은 또한 순수 CSS 때문에 짐 홀 (Jim Hall)의 대답은보다 더 낫다이다.

12.당신은 이런 식으로 뭔가를 사용할 수 있습니다

13.여기에 내가 그것을 접근 방법이다. 내 DIV 높이는는 650입니다. 나는 스크롤 높이가 바닥의 150 픽셀 이내이면 그 후 자동이 스크롤로 결정했다. 다른 사용자를 위해 그것을 둡니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

오버 플로우는 사용자가 스크롤 맨 아래까지 스크롤 DIV하지 않는 한 계속

해결법

1.이 당신을 도울 수 있습니다

2.난 단지 CSS와 함께이 작업을 얻을 수 있었다.

3.난 그냥이 구현 아마도 당신은 나의 접근 방식을 사용할 수 있습니다.

4.

5.2020 년, 당신은 CSS 스냅을 사용할 수 있지만, 크롬 (81) 레이아웃이 변경되기 전에 트리거 다시 스냅, UI가 크롬 81에서 작동 채팅 순수 CSS는, 또한 당신은 할 수 있습니까 CSS를 사용 스냅을 확인할 수 없습니다.

6.

7..cont { 높이 : 100 픽셀; 오버 플로우 엑스 : 숨겨진; 오버 플로우-Y : 자동; 변환 : 회전 (180도)를; 방향 : RTL; 텍스트 정렬은 : 왼쪽; } UL { 오버 플로우 : 숨겨진; 변환 : 회전 (180도)를; } 0 1 2 3 4 5 6 7 8 9 10

8.

9.여기에 라이언 헌트에 의해 블로그 포스트 기반으로하는 솔루션이다. 그것은 스크롤 콘텐츠 하단 요소에 스크롤 위치 핀 오버플 앵커 CSS 속성에 의존한다.

10.

11.그것은 실제로 당신이 위로 스크롤하고 아래로 스크롤하지 않는 동안, 그것은 또한 순수 CSS 때문에 짐 홀 (Jim Hall)의 대답은보다 더 낫다이다.

12.당신은 이런 식으로 뭔가를 사용할 수 있습니다

13.여기에 내가 그것을 접근 방법이다. 내 DIV 높이는는 650입니다. 나는 스크롤 높이가 바닥의 150 픽셀 이내이면 그 후 자동이 스크롤로 결정했다. 다른 사용자를 위해 그것을 둡니다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

7..cont { 높이 : 100 픽셀; 오버 플로우 엑스 : 숨겨진; 오버 플로우-Y : 자동; 변환 : 회전 (180도)를; 방향 : RTL; 텍스트 정렬은 : 왼쪽; } UL { 오버 플로우 : 숨겨진; 변환 : 회전 (180도)를; }

0
1
2
3
4
5
6
7
8
9
10