jquery: $(추가).상단()은 스크롤하지만 $(창)는 스크롤하지 않습니다.맨 아래로 스크롤()
사용자가 페이지를 스크롤할 때마다 페이지 하단에 요소를 배치하고 싶습니다.그것은 "고정 위치"와 비슷하지만 많은 고객의 브라우저가 그것을 지원할 수 없기 때문에 "위치: 고정" CSS를 사용할 수 없습니다.
jquery가 현재 뷰포트의 최상위 위치를 얻을 수 있지만 스크롤 뷰포트의 하위 위치는 어떻게 얻을 수 있습니까?
그래서 나는 어떻게 아는지 묻고 있습니다: $(창구).맨 아래로 스크롤()
var scrollBottom = $(window).scrollTop() + $(window).height();
scrollTop의 정반대인 scrollBottom은 다음과 같아야 합니다.
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
여기 저에게 맞는 작고 못생긴 테스트가 있습니다.
// SCROLLTESTER START //
var showerEl = $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>')
showerEl.insertAfter('body');
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - $(window).height() - scrollTop;
showerEl.html('scrollTop: ' + scrollTop + '<br>scrollBottom: ' + scrollBottom);
});
// SCROLLTESTER END //
미래를 위해, 저는 scrollBottom을 jquery 플러그인으로 만들었습니다. ScrollTop과 같은 방식으로 사용할 수 있습니다(즉, 숫자를 설정하면 페이지 하단에서 해당 양을 스크롤하고 페이지 하단에서 픽셀 수를 반환합니다. 또는 숫자가 제공되지 않으면 페이지 하단에서 픽셀 수를 반환합니다.)
$.fn.scrollBottom = function(scroll){
if(typeof scroll === 'number'){
window.scrollTo(0,$(document).height() - $(window).height() - scroll);
return $(document).height() - $(window).height() - scroll;
} else {
return $(document).height() - $(window).height() - $(window).scrollTop();
}
}
//Basic Usage
$(window).scrollBottom(500);
var scrollBottom =
$(document).height() - $(window).height() - $(window).scrollTop();
저는 아래쪽 스크롤을 받는 것이 더 좋다고 생각합니다.
그러면 맨 위로 스크롤됩니다.
$(window).animate({scrollTop: 0});
맨 아래로 스크롤됩니다.
$(window).animate({scrollTop: $(document).height() + $(window).height()});
필요한 경우 창을 원하는 컨테이너 ID 또는 클래스로 변경합니다(따옴표로 표시).
시도:
$(window).scrollTop( $('body').height() );
다음은 표 그리드에 대한 최상의 옵션 스크롤이며 표 그리드의 마지막 행으로 스크롤됩니다.
$('.add-row-btn').click(function () {
var tempheight = $('#PtsGrid > table').height();
$('#PtsGrid').animate({
scrollTop: tempheight
//scrollTop: $(".scroll-bottom").offset().top
}, 'slow');
});
// Back to bottom button
$(window).scroll(function () {
var scrollBottom = $(this).scrollTop() + $(this).height();
var scrollTop = $(this).scrollTop();
var pageHeight = $('html, body').height();//Fixed
if ($(this).scrollTop() > pageHeight - 700) {
$('.back-to-bottom').fadeOut('slow');
} else {
if ($(this).scrollTop() < 100) {
$('.back-to-bottom').fadeOut('slow');
}
else {
$('.back-to-bottom').fadeIn('slow');
}
}
});
$('.back-to-bottom').click(function () {
var pageHeight = $('html, body').height();//Fixed
$('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
return false;
});
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
내 페이지의 항목:
document.getElementById(elementId).scroll(0,
document.getElementById(elementId).scrollHeight);
function scrollBottum(elementId){
document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}<html><div><button onclick="scrollBottum('myCart')">Click me to scroll</button></div>
<div id="myCart" style="height: 50px; overflow-y: scroll;">
<div>1: A First ...</div>
<div>2: B</div>
<div>3: C</div>
<div>4: D</div>
<div>5: E</div>
<div>6: F</div>
<div>7: LAST !!</div>
</div>
</html>저는 그것을 시도했고 그것은 매우 잘 작동합니다.
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}나는 그 코드를 시도했고 그것은 작동합니다.
// scroll top
scroll(){
let x:any= document.getElementById('chat')
x.scrollTop = 9000;
}
// scroll buttom
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}이것은 빠른 해킹입니다. 스크롤 값을 매우 큰 숫자에 할당하기만 하면 됩니다.이렇게 하면 페이지가 맨 아래로 스크롤됩니다.일반 Javascript 사용:
document.body.scrollTop = 100000;
언급URL : https://stackoverflow.com/questions/4655273/jquery-window-scrolltop-but-no-window-scrollbottom
'source' 카테고리의 다른 글
| 동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS (0) | 2023.08.19 |
|---|---|
| *ngIf와 [hidden]의 차이점은 무엇입니까? (0) | 2023.08.19 |
| Javascript에서 여러 개의 공백을 모두 제거하고 단일 공백으로 대체합니다. (0) | 2023.08.14 |
| Facebook graphApioAuth - 액세스 토큰을 얻는 방법? (0) | 2023.08.14 |
| Galera 성단: 매일 밤 5시 30분에 신비로운 desync (0) | 2023.08.14 |