jQuery로 페이지 스크롤을 프로그래밍 방식으로 비활성화하는 방법
jQuery를 사용하여 본문 스크롤을 비활성화합니다.
제 생각은 다음과 같습니다.
- 세트
body{ overflow: hidden;} - 캡처
scrollTop();/scrollLeft() - 본문 스크롤 이벤트에 바인딩하고 scrollTop/scrollLeft를 캡처된 값으로 설정합니다.
더 좋은 방법이 있습니까?
업데이트:
http://jsbin.com/ikuma4/2/edit 에서 제 사례와 그 이유를 확인해 주시기 바랍니다.
누군가가 "왜 그는 그냥 사용하지 않는가"라고 생각할 것이라는 것을 알고 있습니다.position: fixed패널에?"
다른 이유가 있으니 제안하지 말아주세요.
이렇게 하면 스크롤이 완전히 비활성화됩니다.
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
복원 방법:
$('html, body').css({
overflow: 'auto',
height: 'auto'
});
파이어폭스와 크롬에서 테스트해 봤습니다.
이렇게 할 수 있는 유일한 방법은 당신이 설명한 것과 비슷합니다.
- 현재 스크롤 위치를 잡습니다(가로축 잊지 마십시오!).
- 오버플로를 숨김(hidden)으로 설정합니다(이전 오버플로 값을 유지하려고 할 수 있습니다).
- 스크롤 To()로 문서를 저장된 스크롤 위치로 스크롤합니다.
그런 다음 스크롤을 다시 허용할 준비가 되면 모든 작업을 취소합니다.
편집: 코드를 못 드릴 이유는 없습니다. 제가 그걸 캐내느라 고생했었기 때문에...
// lock scroll position, but retain settings for later
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
이거 먹어봐요.
$('#element').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
})
저는 솔루션에 대해 tfe로 약간의 튜닝을 제공할 뿐입니다.특히 스크롤 바가 다음으로 설정되었을 때 페이지 내용의 이동(페이지 이동이라고 함)이 없도록 몇 가지 추가 컨트롤을 추가했습니다.hidden.
함수 2개 2lockScroll()그리고.unlockScroll()페이지 스크롤을 잠그고 잠금을 해제하도록 각각 정의할 수 있습니다.
function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}
function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$body.css({'margin-right': 0, 'margin-bottom': 0});
}
내가 가정한 곳에서<body>초기 마진이 없습니다.
의 실제를 들어 의 에서 하지만 은 를 하는 과 에 이 하기 이지는 에 를 이지는 에 하기 이 은 의 를 하지만 에 에서 position:fixed 이 특별한 경우를 예로 들어보겠습니다.가 있다고 가정합니다.
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>
와 함께
#header{position:fixed; padding:0; margin:0; width:100%}
, 과 을 해야 해야 에 을 추가해야 .lockScroll()그리고.unlockScroll():
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
마지막으로 여백이나 패딩에 대한 가능한 초기값을 고려합니다.
다음 코드를 사용할 수 있습니다.
$("body").css("overflow", "hidden");
스크롤을 끄려면 다음을 시도합니다.
var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});
재설정하려면:
$(window).off('scroll');
이 문제를 처리하기 위해 jQuery 플러그인을 작성했습니다. $.disablescroll.
마우스 휠, 터치 이동, 키 누르기 이벤트 등에서 스크롤을 방지합니다.
여기 데모가 있어요.
용도:
$(window).disablescroll();
// To re-enable scrolling:
$(window).disablescroll("undo");
이벤트 스크롤에 함수를 연결하고 기본 동작을 방지할 수 있습니다.
var $window = $(window);
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
function onMouseWheel(e) {
e.preventDefault();
}
https://jsfiddle.net/22cLw9em/
마우스 가운데 버튼을 포함하여 스크롤을 비활성화하는 라이너 하나.
$(document).scroll(function () { $(document).scrollTop(0); });
edit: banilla JS에서는 위와 같이 아래와 같이 jQuery가 필요하지 않습니다. (프레임워크가 없음, 자바스크립트만 있음을 의미합니다.
document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })
this.documentElement.scrollTop - 표준
this.body.scrollTop - IE 호환성
- : :
$("body").css("overflow", "hidden"); - 하기: 을 하려면 하려면:
$("body").css("overflow", "initial");
몸 높이를 100%로 설정하고 오버플로를 숨겨주시면 안 되나요?http://jsbin.com/ikuma4/13/edit 참조
누군가가 이 코드를 올렸는데 복원할 때 스크롤 위치를 유지하지 못하는 문제가 있습니다.그 이유는 html과 body에 적용하거나 body에만 적용하는 경향이 있지만 html에만 적용해야 하기 때문입니다.복원할 때 스크롤 위치는 다음과 같이 유지되는 방법:
$('html').css({
'overflow': 'hidden',
'height': '100%'
});
복원 방법:
$('html').css({
'overflow': 'auto',
'height': 'auto'
});
이것은 사용자의 목적에 맞게 작동할 수도 있고 작동하지 않을 수도 있지만 스크롤을 수행하기 전에 jScrollPane을 확장하여 다른 기능을 실행할 수 있습니다.이것을 조금만 테스트해봤지만, 당신이 뛰어들어서 스크롤을 완전히 막을 수 있다는 것을 확인할 수 있습니다.내가 한 일은
- 데모 zip 다운로드: http://github.com/vitch/jScrollPane/archives/master
- "Events" 데모(events.html)를 엽니다.
- 소스를 합니다: 되지 를 하도록 합니다 합니다 하도록 를 .
<script type="text/javascript" src="script/jquery.jscrollpane.js"></script> - jquery.jscrollpane.js 내에 666행(유망한 행 번호!)에 "return;"을 삽입합니다. 그러나 버전이 약간 다를 경우, 이것은 의 첫번째 행입니다.
positionDragY(destY, animate)능
events.html을 실행하면 코딩 작업으로 인해 스크롤되지 않는 일반 스크롤 상자가 나타납니다.
브라우저의 스크롤 바 전체를 이렇게 제어할 수 있습니다(fullpage_scroll.html 참조).
그래서 아마도 다음 단계는 다른 기능에 호출을 추가하는 것입니다. 호출이 꺼지고 닻을 내리는 마법을 수행한 다음 스크롤을 계속할지 여부를 결정하는 것입니다.top 및 left 스크롤을 설정할 수 있는 API 호출도 있습니다.
더 많은 도움을 원한다면, 어디로 이동하는지 게시하세요!
도움이 됐기를 바랍니다.
여기에 도움이 될 만한 답변을 올렸습니다: jQuery simplemodal 스크롤 비활성화
텍스트를 이동하지 않고 스크롤 바를 끄는 방법을 보여줍니다.단순한 모달에 대한 부분은 무시해도 됩니다.
키보드 탐색만으로 스크롤을 비활성화하려면 키다운 이벤트를 재정의할 수 있습니다.
$(document).on('keydown', function(e){
e.preventDefault();
e.stopPropagation();
});
다음 코드를 사용해 보십시오.
$(function() {
// ...
var $body = $(document);
$body.bind('scroll', function() {
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});
// ...
});
스크롤을 비활성화하기 위해 다음 코드를 사용하고 있으며 잘 작동합니다.
$('html').css({
'overflow': 'hidden',
'height': '100%'
});
안드로이드 태블릿에서 url address bar와 top window tag가 계속 보이고, 사용자가 위아래로 스크롤할 때 window도 40분 정도 상하로 스크롤하고 url bar와 tags를 보여줍니다.이를 방지하고 스크롤을 완전히 비활성화할 수 있는 방법이 있습니까?
페이지에 내용이 스크롤되는 것을 방지하기 위해 스크롤 가능한 디브로 창을 덮을 수 있습니다.숨김과 표시를 통해 스크롤을 잠그거나 풀 수 있습니다.
다음과 같은 작업을 수행합니다.
#scrollLock {
width: 100%;
height: 100%;
position: fixed;
overflow: scroll;
opacity: 0;
display:none
}
#scrollLock > div {
height: 99999px;
}
function scrollLock(){
$('#scrollLock').scrollTop('10000').show();
}
function scrollUnlock(){
$('#scrollLock').hide();
}
중앙 배치를 사용하는 사용자의 경우( 경유)margin:0 auto;), 여기에 매시업이 있습니다.position:fixed솔루션과 @tfe의 제안 솔루션을 함께 제공합니다.
스크롤 막대가 표시/숨기기 때문에 페이지가 삭제되는 경우 이 솔루션을 사용합니다.
// lock scroll position, but retain settings for later
var scrollPosition = [
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);
…에 대응합니다.
// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])
…그리고 마지막으로 CSS는.modal-noscroll…
.modal-noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
이것이 다른 어떤 솔루션보다 더 적절한 해결책이라고 감히 말하고 싶지만, 아직 완벽하게 테스트해 본 적은 없습니다. :P
편집: 터치 장치에서 이것이 얼마나 나쁜 성능(읽기: 폭파)을 발휘할 수 있는지 알 수 없습니다.
DOM을 사용하여 이를 수행할 수도 있습니다.다음과 같이 호출하는 기능이 있다고 가정해 보겠습니다.
function disable_scroll() {
document.body.style.overflow="hidden";
}
그리고 그것이 전부입니다!이것이 다른 모든 답변에 더 도움이 되기를 바랍니다!
이게 제가 한 일입니다.
커피스크립트:
$("input").focus ->
$("html, body").css "overflow-y","hidden"
$(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
event.preventDefault()
$("input").blur ->
$("html, body").css "overflow-y","auto"
$(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"
자바스크립트:
$("input").focus(function() {
$("html, body").css("overflow-y", "hidden");
$(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
return event.preventDefault();
});
});
$("input").blur(function() {
$("html, body").css("overflow-y", "auto");
$(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});
누가 내 해결책을 시도해 보았는지 확실하지 않습니다.이는 전신/html에서 작동하지만 스크롤 이벤트가 발생하는 모든 요소에 적용할 수 있습니다.
필요에 따라 스크롤 잠금을 설정했다가 해제하기만 하면 됩니다.
var scrollLock = false;
var scrollMem = {left: 0, top: 0};
$(window).scroll(function(){
if (scrollLock) {
window.scrollTo(scrollMem.left, scrollMem.top);
} else {
scrollMem = {
left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
};
}
});
JSFiddle의 예는 다음과 같습니다.
누군가에게 도움이 되길 바랍니다.
가장 좋고 깨끗한 해결책은 다음과 같습니다.
window.addEventListener('scroll',() => {
var x = window.scrollX;
var y = window.scrollY;
window.scrollTo(x,y);
});
그리고 jQuery와 함께:
$(window).on('scroll',() => {
var x = window.scrollX;
var y = window.scrollY;
window.scrollTo(x,y)
})
이벤트 수신자는 스크롤을 차단해야 합니다.스크롤을 다시 활성화하려면 제거하기만 하면 됩니다.
스크롤을 프로그래밍 방식으로 비활성화하려면 다음을 사용할 수 있습니다.
overflow: clip;
사용자의 스크롤을 비활성화하려면 다음을 사용할 수 있습니다.
overflow: hidden;
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
오버플로 속성에 대한 브라우저 지원은 다양합니다.
https://caniuse.com/ ?search=http://overflow
언급URL : https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery
'programing' 카테고리의 다른 글
| Set-Execution Policy가 금지된 경우에도 PowerShell 스크립트를 실행하려면 어떻게 해야 합니까? (0) | 2023.09.09 |
|---|---|
| TextView를 스타일리시하여 모든 문자를 대문자로 만드는 방법이 있습니까? (0) | 2023.09.09 |
| MySQL 온라인 테스트 도구 (0) | 2023.09.09 |
| MariaDB의 CANCAT 키가 10.0에서 작동하지만 이후 버전은 작동하지 않는 테이블 (0) | 2023.09.09 |
| 안드로이드:배열에서 프로그래밍 방식으로 스피너 생성 (0) | 2023.09.09 |