스크롤 막대를 제거하는 방법은 무엇입니까? 스크롤바를 제거하는 방법 미란다에서 스크롤바 점프를 비활성화하는 방법
웹페이지에서 스크롤바를 제거하기 전에 그것이 정말로 필요한지 생각해 보십시오. 웹페이지 콘텐츠를 스크롤할 수 없기 때문에 당사 사이트 방문자가 정보를 보기가 어렵습니다. 디자인의 즐거움을 선사해야 하거나 독자들에게 어려움을 주고 싶은 욕구가 있다면 계속해서 사업을 시작해 보세요. 그러나 당신은 경고를 받았습니다!
프레임프레임의 스크롤 막대 표시를 제어하려면 스크롤 매개변수를 사용합니다. 두 가지 주요 값을 사용할 수 있습니다. yes - 정보의 양에 관계없이 항상 스크롤 막대를 표시하고 no - 스크롤 막대 표시를 금지합니다(예 1).
프레임
예제에 표시된 대로 MENU라는 이름의 왼쪽 프레임에는 스크롤 막대가 없습니다. 인접한 프레임에서는 스크롤 매개변수를 지정하지 않아도 기본적으로 스크롤바가 기능 세트로 표시됩니다.
새 창새 창에서 스크롤 막대를 제거하려면 SHTML 기능이 충분하지 않습니다. 보편적인 접근 방식을 사용하려면 JavaScript를 사용하여 새 창을 개발해야 합니다. 그리고 창을 생성하는 window.open 메소드의 매개변수 중 하나로 scrollbar=0 을 지정할 수 있습니다. 이 속성은 가로 및 세로 스크롤 막대가 없는 창을 만듭니다(예 2).
예 2: 스크롤 막대 없이 새 창 만들기
새창
window.open("tips.STML", "TIP", "너비=400, 높이=300, 상태=0, 메뉴바=0, 위치=0, 크기 조정 가능=0, 디렉터리=0, 도구 모음=0, 스크롤바=0 ");
이 예에서는 스크롤 막대를 포함하여 다양한 탐색 요소 없이 크기가 400x300픽셀인 새 창에서 Tips.html 파일을 엽니다.
스타일 사용또 다른 방법은 오버플로 스타일 속성을 사용하는 것입니다. 이 매개변수가 Hidden 값을 가진 태그에 적용되면 웹페이지에 스크롤바가 표시되지 않습니다(예 3).
스크롤바
BODY( 오버플로: 숨김; )
같은 방법으로 스크롤바를 포함하는 웹페이지의 다른 요소(예: 일부 양식 요소)에서 스크롤바를 제거할 수 있습니다.
논평
위의 예는 Internet Explorer 브라우저에서 작동하지 않습니다. 이 브라우저에서 스크롤 막대를 숨기려면 !DOCTYPE 을 제거해야 합니다. 하지만 해당 코드는 더 이상 유효하지 않습니다.
Internet Explorer 브라우저는 각각 가로 및 세로로 스크롤 막대를 숨길 수 있는 Overflow-x 및 Overflow-y 속성도 지원합니다(예 4).
스크롤바
BODY(overflow-y: 숨김; )
어떤 이유로 화면에 스크롤 막대가 없지만 정보는 있지만 화면에 맞지 않는 상황에 처한 경우 키보드를 사용하여 웹 페이지를 위아래로 "스크롤"할 수 있습니다. 화살표) 또는 마우스. 커서가 웹 페이지의 아무 곳에나 있을 때 마우스 버튼을 누르고, 놓지 않고 아래로 이동합니다. 이는 콘텐츠가 강조 표시되고 동시에 스크롤되는 방식입니다. 그러나 이 방법은 간단히 말해서 그다지 편리하지 않으며 매우 극단적인 경우에만 권장될 수 있습니다.
스크롤을 끄는 방법은 무엇입니까?
스승님의 대답:
스크롤링은 문서나 웹사이트에서 이동해야 할 때 필요하며 스크롤링의 크기는 화면 크기를 제한하지 않습니다. 수직 스크롤과 수평 스크롤이 있습니다. 스크롤이 비활성화되면 리소스 전체를 볼 수 없게 됩니다.
스크롤은 구성 가능한 설정입니다. 기본 설정은 “마우스”를 사용하여 설정할 수 있으며 모든 애플리케이션에 적용되며 스크롤 방식은 브라우저를 사용하여 설정 및 취소할 수 있습니다. 이러한 설정은 인터넷 서핑 중에도 작동합니다.
인터넷 리소스를 탐색하는 동안 부드러운 스크롤을 비활성화하려면 브라우저를 실행하고 "도구" 메뉴에서 "설정" 섹션을 선택하십시오. Internet Explorer의 경우 도구 메뉴와 인터넷 옵션 섹션이 됩니다. 메뉴가 표시되지 않으면 브라우저 창의 상단 또는 하단 패널을 클릭하고 메뉴의 "메뉴 표시줄" 또는 "메뉴 표시줄" 하위 항목을 마커로 표시하세요.
"설정" 창을 연 후 "고급" 탭으로 이동하여 "일반" 하위 섹션을 활성화하세요. "사이트 보기" 그룹을 찾아 "부드러운 스크롤 사용" 상자를 선택 취소한 다음 "확인" 버튼을 클릭하세요.
자동 스크롤을 비활성화하려면 "자동 스크롤 사용" 상자를 선택 취소하세요. Internet Explorer의 경우 방법이 약간 다릅니다. 필요한 항목을 찾을 때까지 스크롤 막대를 사용하여 사용 가능한 설정 목록을 이동해야 합니다.
일반적인 스크롤 설정을 구성하기 위해 "시작" 메뉴에서 "제어판"이라고 부르는 "마우스" 구성 요소를 사용합니다. "프린터 및 기타 장비" 카테고리로 이동하여 "마우스" 아이콘을 클릭해 보겠습니다.
"속성: 마우스" 창이 열리면 "휠" 탭으로 이동하여 요구 사항에 따라 스크롤을 구성해야 합니다. "화면" 필드에 설정된 마커는 화면 높이와 동일한 거리에서 모니터 전체에 걸쳐 이미지를 이동합니다.
이 매개변수가 너무 크면 "지정된 행 수에 대해" 필드에 마커를 설정하고 키보드 또는 화살표 버튼을 사용하여 필요한 값을 입력할 수 있습니다. 값 "0"은 설정할 수 없습니다. 변경 사항을 적용하고 창을 닫습니다.
이 비디오는 Adobe Muse에서 웹 사이트를 보고 게시할 때 스크롤 막대를 제거하는 방법에 대한 것입니다.
이를 수행하는 방법에는 두 가지가 있습니다.
1. 첫 번째는 페이지의 "디자인" 모드에서 콘텐츠 영역 외부에 있는 요소를 간단히 제거하는 것입니다.
2. 두 번째는 페이지의 헤드 섹션에 특수 HTML 코드를 배치하는 것입니다.
이 비디오를 시청하세요:
“이 비디오 튜토리얼에서는 스크롤 막대를 제거하는 방법을 살펴보겠습니다.
스크롤바를 제거하는 방법. 문제에 대한 설명입니다.바로 프로그램을 열어보겠습니다. 여기에 새 프로젝트가 생성되었습니다. 만일의 경우를 대비해 여기서는 75% 스케일을 만들어 보겠습니다. 그리고 페이지를 확대해 보겠습니다. 페이지에 하나, 둘, 셋 등 여러 개체가 있다고 가정해 보겠습니다. 여기에는 텍스트, 로고, 그림 등이 있습니다. 그리고 실수로 페이지의 콘텐츠 영역 외부에 개체를 배치했습니다.
"선택" 아이콘을 클릭하면 이 개체가 표시되지 않습니다. 특히 "프레임 여백 표시" 기능을 끄고 이전 버전에서는 이것이 기본값인 경우 프레임 가장자리 위에 마우스를 올려놓을 때만 프레임 가장자리가 표시되었습니다. 페이지 외부에 있는 개체는 해당 개체 위로 마우스를 가져갈 때까지 전혀 표시되지 않습니다.
따라서 브라우저에서 페이지를 볼 때 가로 스크롤을 경험하게 되는데, 이는 사이트의 모든 사람에게 매우 짜증나는 현상입니다. 또한, 예를 들어 페이지의 배경색을 녹색으로 설정한 경우 페이지를 보고 아래쪽으로 스크롤하면 페이지가 가로 스크롤되는 것을 볼 수 있으므로 더 잘 보입니다.
스크롤바를 제거하는 방법. 해결책 1.페이지 디자인 모드로 이동합니다. "프레임 가장자리" 기능이 꺼져 있어도 Ctrl+A 키 조합을 눌러 페이지의 모든 개체를 선택할 수 있습니다. 그런 다음 배율을 50%로 줄이거나 Alt 키를 누른 채 마우스 휠을 사용자 쪽으로 굴립니다. 이렇게 하면 페이지 콘텐츠 영역 뒤에 개체가 있음을 알 수 있습니다.
가로 스크롤을 제거하려면 불필요한 개체를 제거하거나 페이지 콘텐츠 영역으로 이동해야 합니다.
Ctrl+ 키 조합을 누르면 페이지 콘텐츠 영역 뒤에 아무것도 없는 것을 볼 수 있습니다.
보기 모드로 이동하면 이제 브라우저에 가로 스크롤이 없습니다.
스크롤바를 제거하는 방법. 해결책 2.이 방법을 사용하여 가로 스크롤을 제거할 수 없는 경우 페이지에서 이 스크롤을 비활성화할 수 있는 다른 방법이 있습니다.
"페이지" 메뉴 " "로 이동하여 여기 "메타데이터" 섹션의 헤드에 대한 HTML 블록에 코드를 삽입하세요. 지금 보여드리겠습니다. 이 비디오의 설명에서 이 코드를 볼 수 있으며, 복사하여 붙여넣으세요. 이것이 그의 모습입니다.
이를 선택하고(Ctrl+C 키 조합을 누름) 페이지 디자인 모드로 돌아가서 여기에 페이지 속성에 삽입하고 확인을 클릭합니다.
따라서 일부 블록이 페이지 콘텐츠 영역 외부에 있더라도 브라우저에서 페이지를 볼 때 가로 스크롤도 발생하지 않습니다.
스크롤바를 제거하는 방법. 결론이것으로 우리 수업을 마칩니다. 여기서는 Adobe Muse의 브라우저에서 페이지를 볼 때 스크롤 막대를 제거하는 방법을 배웠습니다.
그리고 저는 여러분에게 작별 인사를 하는 것이 아닙니다. 내 채널을 구독하고, 좋아요를 누르고, 댓글을 쓰고, 이전 및 다음 비디오 강의를 시청하세요. 또 만나요 친구들, 안녕.”
스크롤바를 제거하는 방법. 수업에 추가됩니다.이 코드가 작동하지 않고 스크롤 막대가 여전히 남아 있는 경우 먼저 브라우저 캐시를 지워보세요. 위에 제시된 코드 대신 다음 코드를 사용해 볼 수도 있습니다.
추가 수직 스크롤을 추가하지 않고 수평 스크롤 제거:
html(overflow-x: 숨김) div( 높이 : "100%" ; )
|
나는 scrollTo jQuery 플러그인을 사용하고 있으며 Javascript를 통해 창 요소의 스크롤을 일시적으로 비활성화할 수 있는 방법이 있는지 알고 싶습니다. 스크롤을 비활성화하려는 이유는 scrollTo 애니메이션 중에 스크롤하면 정말 보기 흉해지기 때문입니다.)
물론 $("body").css("overflow", "hidden"); 그런 다음 애니메이션이 중지되면 자동으로 되돌립니다. 하지만 스크롤 막대가 계속 표시되지만 비활성화되어 있으면 더 좋을 것입니다.
답변 30개 /** * $.disablescroll * 작성자: Josh Harrison - aloof.co * * 마우스휠, 터치무브 및 키 누르기에서 스크롤 이벤트를 비활성화합니다. * jQuery가 매우 부드러운 승차감을 보장하기 위해 스크롤 위치에 애니메이션을 적용하는 동안 사용하세요! */ ;(function($) ( "use strict"; var 인스턴스, proto; function UserScrollDisabler($container, options) ( // 스페이스바: 32, pageup: 33, pagedown: 34, end: 35, home: 36 / / 왼쪽: 37, 위쪽: 38, 오른쪽: 39, 아래쪽: 40 this.opts = $.extend((handleKeys: true, scrollEventKeys: ), options) this.$container = $container (문서); lockToScrollPos = ; this.disable(); proto = UserScrollDisabler.prototype; proto.disable = function() ( var t = this; t.lockToScrollPos = [ t.$container.scrollLeft(), t .$container.scrollTop() ]; t.$container.on("mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel) t.$container.on("scroll.disablescroll", function() ( t._handleScrollbar.call(t )); if(t.opts.handleKeys) ( t.$document.on("keydown.disablescroll", function(event) ( t._handleKeydown.call(t, event); )); ) ); = function() ( var t = this; t.$container.off(".disablescroll"); if(t.opts.handleKeys) ( t.$document.off(".disablescroll"); ) ); proto._handleWheel = function(event) ( event.preventDefault(); ); proto._handleScrollbar = function() ( this.$container.scrollLeft(this.lockToScrollPos); this.$container.scrollTop(this.lockToScrollPos); ); proto._handleKeydown = function(event) ( for (var i = 0; i< this.opts.scrollEventKeys.length; i++) { if (event.keyCode === this.opts.scrollEventKeys[i]) { event.preventDefault(); return; } } }; // Plugin wrapper for object $.fn.disablescroll = function(method) { // If calling for the first time, instantiate the object and save // reference. The plugin can therefore only be instantiated once per // page. You can pass options object in through the method parameter. if(! instance && (typeof method === "object" || ! method)) { instance = new UserScrollDisabler(this, method); } // Instance already created, and a method is being explicitly called, // e.g. .disablescroll("undo"); else if(instance && instance) { instance.call(instance); } }; // Global access window.UserScrollDisabler = UserScrollDisabler; })(jQuery);내 jQuery 팝업 프로젝트에서 : https://github.com/seahorsepip/jPopup
//페이지 내용 스크롤 기능 고정 동결() ( if($("html").css("position") != "fixed") ( var top = $("html").scrollTop() ? $(" html").scrollTop() : $("body").scrollTop(); if(window.innerWidth > $("html").width()) ( $("html").css("overflow-y ", "스크롤"); ) $("html").css(("width": "100%", "height": "100%", "position": "고정", "top": -top )); ) ) //페이지 내용 스크롤 기능 고정 해제 unfreeze() ( if($("html").css("position") == "fixed") ( $("html").css("position" , "정적"); $("html, body").scrollTop(-parseInt($("html").css("top"))) $("html").css(("위치": "", "너비": "", "높이": "", "상단": "", "overflow-y": ""));
이 코드는 너비, 높이, 스크롤 막대 및 페이지 점프 문제를 고려합니다.
위 코드로 해결할 수 있는 문제는 다음과 같습니다.
- 너비, 고정 위치를 설정할 때 html 요소의 너비는 100%보다 작을 수 있습니다.
- 높이, 위와 동일
- 스크롤 막대, 위치를 고정으로 설정하면 수평 페이지 점프가 발생하기 전에 스크롤 막대가 있었더라도 페이지 콘텐츠에 더 이상 스크롤 막대가 없습니다.
- pagejump, 고정 위치를 설정하면 페이지의 scrollTop이 더 이상 유효하지 않아 수직 페이지 점프가 발생합니다.
누구든지 위의 페이지 고정/고정 해제 코드에 개선 사항이 있는 경우 알려주시면 해당 개선 사항을 내 프로젝트에 추가할 수 있습니다.
스크롤을 비활성화합니다.
$(".popup").live(( popupbeforeposition: function(event, ui) ( $("body").on("touchmove", false); ) ));
버전 스크롤 팝업을 닫은 후:
$(".popup").live(( popupafterclose: function(event, ui) ( $("body").unbind("touchmove"); ) ));
다음 코드 조각(jquery 사용)은 창 스크롤을 비활성화합니다.
Var curScrollTop = $(window).scrollTop(); $("html").toggleClass("noscroll").css("top", "-" + curScrollTop + "px");
그리고 귀하의 CSS에서 :
Html.noscroll(위치: 고정; 너비: 100%; 위쪽:0; 왼쪽: 0; 높이: 100%; 오버플로-y: 스크롤 !중요; z-색인: 10; )
이제 모달을 제거할 때 html 태그에서 noscroll 클래스를 제거하는 것을 잊지 마세요.
$("html").toggleClass("noscroll");
Document.onwheel = function(e) ( // 대상 요소 가져오기 target = e.target; // 대상 요소는 스크롤 가능한 요소의 자식일 수 있습니다. // 예: "ul", "p 내부의 "li" "s는 "div" 안에 있습니다. // 상위 요소를 가져와서 스크롤 가능한지 확인해야 합니다. // 상위 요소가 스크롤 가능하지 않으면 다음 상위 요소로 이동합니다. while (target.scrollHeight 0) ( e .preventDefault(); ) ); body ( 배경: Gainsboro; ) #box ( 너비: 300px; 높이: 600px; 패딩: 5px; 테두리: 1px 솔리드 실버; 여백: 50px 자동; 배경: 흰색; 오버플로: 자동; )
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum.
이것은 지금까지 얻은 가장 간단한 솔루션입니다. 그리고 저를 믿으십시오. 저는 다른 모든 것을 시도해 보았으며 이것이 가장 쉬운 것입니다. 시스템 스크롤바를 위한 공간을 만들기 위해 페이지를 오른쪽으로 밀어넣는 Windows 장치와 브라우저에서 스크롤바를 위한 공간이 필요하지 않은 iOS 장치에서 훌륭하게 작동합니다. 따라서 이것을 사용하면 오른쪽에 패딩을 추가할 필요가 없으므로 CSS에서 본문을 숨기거나 html 오버플로를 숨길 때 페이지가 깜박이지 않습니다.
생각해 보면 해결책은 매우 간단합니다. 주는 것이 아이디어
sdleihssirhc의 아이디어를 결합하여 더 좋지만 버그가 있는 방법을 찾았습니다.
Window.onscroll = function() ( window.scrollTo(window.scrollX, window.scrollY); //또는 //window.scroll(window.scrollX, window.scrollY); //또는 대체 //window.scrollX=window .scrollX; //window.scrollY=window.scrollY);
테스트해보지는 않았지만 나중에 수정해서 알려드리겠습니다. 나는 그것이 주요 브라우저에서 작동한다고 85% 확신합니다.
그래서 오늘은 가로 및 세로 스크롤 막대를 제거해야 합니다. 이러한 문제가 발생할 수 있는 상황과 이를 해결하는 주요 방법을 살펴보겠습니다.
CSS를 사용하여 페이지에서 스크롤 막대 제거방법은 용도에 따라 결정됩니다. CSS속성 과다, 블록 구조의 내용(내용)이 상위 요소의 크기를 초과하는 경우 해당 내용이 표시되는 방법을 결정합니다.
이 속성의 가능한 모든 값 중에서 우리는 " 숨겨진»:
오버플로: 숨김;
브라우저에 지시하는 것 "맞는 내용을 표시하고 맞지 않는 내용은 숨깁니다."
이 속성을 선택기에 적용하여 몸또는 HTML스크롤바를 사라지게 할 수 있습니다.
예를 살펴보겠습니다:
< html> < head> < meta charset= "UTF-8" > < title>스크롤 제거< body> < div>
div( 높이: 2800px; )
보시다시피 수직 스크롤 막대가 있는 높이 2800px의 깨끗하고 깨끗한 페이지가 있습니다. 이제 계단식 스타일 시트에 다음 줄을 추가해 보겠습니다.
HTML(오버플로: 숨김;)
페이지를 업데이트하세요.
속성을 적용할 수도 있습니다. 오버플로-y (오버플로-x) 위치를 벗어난 콘텐츠 표시를 수직(수평)으로만 제어합니다. 즉, 해당 컨텍스트에 따라 세로(가로) 스크롤 막대만 숨길 수 있습니다.
중요한!!!
- 사전에 화면에 완전히 들어갈 수 있는 작은 페이지를 표시합니다(예: 오류 페이지, 인증 페이지 등).
- 작은 웹 양식의 출력
- 자신만의 사용자 정의 스크롤 막대를 만들 때 스크롤 막대를 숨깁니다.
대부분의 경우 웹마스터는 시스템 스크롤 막대의 "지루한" 표준 모양으로 인해 사이트의 뛰어난 작성자의 디자인이 0이 될 때 이 주제에 도달합니다. 예, 이런 일도 발생합니다. 이 경우 문제를 해결하기 위한 몇 가지 옵션이 있습니다.
시스템 스크롤바를 사용자 정의합니다.
오늘날에는 다음을 기반으로 하는 브라우저를 사용하여 다소 유연한 구성이 가능합니다. 웹킷.
우리는 스크롤 막대의 구조적 부분을 담당하는 상당히 광범위한 의사 요소와 다양한 상태에서 구조적 부분의 모양을 사용자 정의하는 데 도움이 되는 의사 선택기를 마음대로 사용할 수 있습니다.
장점:
- 시스템 스크롤이 훨씬 더 생산적입니다. 자바스크립트-시뮬레이터는 장치 운영 체제의 모든 기능을 구현하고 크로스 플랫폼 기능을 유지합니다.
결점:
- 다른 브라우저(아님)는 보장되지 않습니다. 웹킷) 엔진은 사이트의 모든 "정신적 조직의 미묘함"을 이해할 수 있습니다(사용자 정의는 거의 일어나지 않을 것입니다).
시스템 스크롤 막대를 숨기고 사용 자바스크립트-에뮬레이터.
꽤 논리적인 것 같습니다. 브라우저 간 호환성을 원한다면 다음을 사용하세요. 자바스크립트. 그러나 이 경우 이는 잔인한 오해이다.
요점은 이 경우에는 자바스크립트스크롤과 관련된 시스템 이벤트를 처리해야 합니다. 그리고 이러한 이벤트의 인터페이스는 플랫폼은 말할 것도 없고 브라우저마다 크게 다릅니다. "기성품" j-스크롤러를 사용할 때(특히 소스 페이지가 확인 없이 전체 "크로스"를 주장하는 경우) 이 정보를 고려하십시오.
장점
- 심도 있는 무제한 사용자 정의.
결함
- 에뮬레이터 성능은 시스템 스크롤 성능보다 낮습니다.
- 크로스 브라우저 또는 크로스 플랫폼 기능은 보장되지 않습니다.
