스크롤바가 웹 페이지의 위치를 변경하는 것을 방지하는 방법은 무엇입니까?
저는 중앙에 정렬된 DIV를 가진 웹사이트를 가지고 있습니다.어떤 페이지는 스크롤이 필요하지만 어떤 페이지는 그렇지 않습니다.한 유형에서 다른 유형으로 이동하면 스크롤 막대 모양이 페이지를 몇 픽셀 옆으로 이동합니다.각 페이지에 스크롤 막대를 명시적으로 표시하지 않고 이를 방지할 수 있는 방법이 있습니까?
overflow-y:scroll은 맞지만, 본문이 아닌 html 태그와 함께 사용해야 합니다. 그렇지 않으면 IE 7에서 이중 스크롤 막대를 얻을 수 있습니다.
다음과 .
html {
overflow-y: scroll;
}
스크롤 가능한 요소의 내용을 디브로 싸서 적용합니다.padding-left: calc(100vw - 100%);.
<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>
그 ㅠㅠ100vw스크롤 막대를 포함한 뷰포트의 100%를 나타냅니다.를 요.100%스크롤 막대 없이 사용 가능한 공간입니다. 스크롤 막대의 너비 또는0만약 존재하지 않으면.왼쪽에 해당 너비의 패딩을 만들면 두 번째 스크롤 막대가 시뮬레이션되어 중심 내용이 오른쪽으로 다시 이동합니다.
스크롤 가능한 요소가 페이지의 전체 너비를 사용하는 경우에만 이 기능이 작동하지만 스크롤 가능한 내용을 중앙에 두는 경우는 거의 없기 때문에 대부분 문제가 없습니다.
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
예를 들면.최소 높이 변경 단추를 누릅니다.
와 함께calc(100vw - 100%)스크롤 막대의 너비를 계산할 수 있습니다(표시되지 않으면 0이 됩니다).의 마진-우측을 하여 아디어: 마우스너-익을사-용여하다폭의 수 .<html>이 폭까지수평 스크롤 막대가 표시됩니다. 이 막대는 다음을 사용하여 숨겨져야 합니다.overflow-x: hidden.
전 그렇지 않다고 생각해요.하지만 스타일링은body와 함께overflow: scroll해야 합니다.하지만 당신은 알고 있는 것 같군요.
스크롤이 항상 표시되므로 레이아웃에 적합하지 않을 수 있습니다.
css3으로 본문 너비 제한 시도
body {
width: calc(100vw - 34px);
}
vw뷰포트의 너비입니다(자세한 내용은 이 링크 참조)
calc css3로 합니다.
34px이중 스크롤 막대 너비를 나타냅니다(고정은 이 항목을 참조하거나 고정 크기를 신뢰하지 않는 경우 계산하려면 이 항목을 참조하십시오).
크기를 변경하거나 일부 데이터를 로드한 후 스크롤 막대를 추가하는 경우 다음을 시도하여 클래스를 만들고 이 클래스를 적용할 수 있습니다.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
body {
scrollbar-gutter: stable both-edges;
}
스크롤바 위치 조정에 도움이 될 새로운 css 사양이 출시되고 있습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
이전 게시물인지는 모르겠지만, 저도 같은 문제가 있었고, 세로로 스크롤하려면 당신만 시도해야 합니다.overflow-y:scroll
요약
저는 세 가지 방법을 봅니다. 각각 그들만의 독특한 점이 있습니다.
StackBlitz 데모입니다.
내용 이동을 보려면 "토글 높이"를 누릅니다.
스크롤 막대 모양의 그림
이것은 제한적인 지원을 제공하지만,@support미디어 쿼리 우리는 이것과 그것의 조합을 사용할 수 있습니다.overflow-y: scroll:
html {
overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
이러한 방식으로 콘텐츠는 절대 변경되지 않습니다.
이 솔루션의 "문제"는 스크롤바를 위한 공간이 항상 고정되어 있다는 것입니다.
overflow: 제한된 지원을 오버레이하고 오버레이되는 모든 항목을 숨깁니다.활력소가 숨겨져 있지 않은지 확인하기 위해 특별한 주의가 필요합니다(확대/축소 및 텍스트 크기 변경 시에도 마찬가지).
스크롤 막대 거터와 결합할 수 있습니다.
html {
overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
@supports (overflow-y: overlay) {
html {
overflow-y: overlay;
scrollbar-gutter: auto;
}
}
마진과 약과마스마진을 하는 합니다.overflow-x: hidden그러나 특정 상황에서는 중요한 내용을 숨길 수 있습니다.작은 화면, 사용자 정의 글꼴/확대/축소 크기, 브라우저 확장 등.
계산(100vw - 100%)
이 작업은 다음과 같은 RTL 지원을 통해 수행할 수 있습니다.
html[dir='ltr'] main {
padding-left: calc(100vw - 100%);
}
html[dir='rtl'] main {
padding-right: calc(100vw - 100%);
}
에▁where디<main>이 경우 중심 내용의 컨테이너가 됩니다.
중심 컨테이너가 다음보다 작은 한 여기의 내용은 이동하지 않습니다.<main>하지만 100% 컨테이너가 되는 대로 패딩이 도입될 것입니다.StackBlizz 데모참하 "토글 폭" 릭클니합다를고조를▁stack"다를니합itz릭t클bl데모▁width.
이 솔루션의 "문제"는 "작은 화면"에서 패딩을 방지하기 위해 미디어 쿼리가 필요하고 스크롤 막대가 보여야 할 때 작은 화면에서도 100% 콘텐츠와 스크롤 막대를 사용할 공간이 없기 때문에 일부 이동이 발생한다는 것입니다.
결론 스크롤 막대 거터를 오버레이와 함께 사용합니다.빈 공백을 사용하지 않으려면 다음을 시도합니다.calc미디어 쿼리가 있는 솔루션입니다.
컨테이너 요소의 너비를 이렇게 설정하기만 하면 됩니다.
width: 100vw;
이렇게 하면 해당 요소가 스크롤 막대를 무시하고 배경색 또는 이미지와 함께 작동합니다.
@kashsandr의 솔루션은 저에게 효과가 있었지만 가로 스크롤 막대를 숨기기 위해 바디용 스타일을 하나 더 추가했습니다.완전한 솔루션은 다음과 같습니다.
CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>
제이에스
$(function(){
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
});
JS 전용 솔루션(첫 번째 모달에서 두 번째 모달이 열린 경우):
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
$('body').css('padding-right', 17);
}
});
저는 제 웹사이트 중 하나에서 뷰포트 크기에서 스크롤바 너비를 뺀 값으로 자바스크립트의 본문 너비를 명시적으로 설정하여 문제를 해결했습니다.여기에 나와 있는 jQuery 기반 함수를 사용하여 스크롤 막대의 너비를 결정합니다.
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
Rapti의 답변에서 벗어나면 이것도 마찬가지로 작동해야 하지만 오른쪽에 더 많은 마진을 추가합니다.body그리고 그것을 부정적으로 숨깁니다.html페이지 레이아웃에 영향을 줄 수 있는 패딩을 추가하는 대신 여백을 선택합니다.이렇게 하면 실제 페이지(대부분의 경우)에서 아무것도 변경되지 않으며 코드는 여전히 작동합니다.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
다음을 사용하여 답변 확장:
body {
width: calc(100vw - 17px);
}
한 해설자는 중심을 유지하기 위해 왼쪽 패딩도 추가할 것을 제안했습니다.
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
그러나 콘텐츠가 뷰포트보다 넓으면 상황이 올바르게 표시되지 않습니다.이 문제를 해결하려면 다음과 같은 미디어 쿼리를 사용할 수 있습니다.
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}
여기서 1058ppm = 내용물 폭 + 17 * 2
이렇게 하면 수평 스크롤 막대가 x 오버플로를 처리하고 뷰포트가 고정 너비 콘텐츠를 포함할 수 있을 정도로 충분히 넓을 때 중심 콘텐츠를 중앙에 유지할 수 있습니다.
테이블 너비가 변경되지 않으면 스크롤 막대를 포함하는 요소(예: tbody)의 너비를 100% 이상으로 설정하고(스크롤 막대에 추가 공간 허용) overflow-y를 "오버레이"로 설정할 수 있습니다(스크롤 막대가 고정 상태를 유지하고 표시될 때 테이블이 왼쪽으로 이동하지 않도록).또한 스크롤 막대를 사용하여 요소의 고정 높이를 설정하여 높이가 초과되면 스크롤 막대가 나타납니다.이와 같은 경우:
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}
참고: 스크롤 막대가 차지하는 공간의 %는 테이블 너비에 비례하므로 너비 %를 수동으로 조정해야 합니다(즉, 테이블 너비가 작으면 픽셀 단위로 크기가 일정하므로 스크롤 막대를 장착하는 데 더 많은 %가 필요함).
동적 테이블 예:
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row)
{
var table = document.getElementById("data");
var rowCount = table.rows.length;
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}.scroll-table {
border-collapse: collapse;
}
.scroll-table tbody {
display:block;
overflow-y:overlay;
height:60px;
width: 105%
}
.scroll-table tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.scroll-table thead tr {
display:block;
}
.scroll-table td {
border-top: thin solid;
border-bottom: thin solid;
}
.scroll-table td:first-child {
border-left: thin solid;
}
.scroll-table td:last-child {
border-right: thin solid;
}
.scroll-table tr:first-child {
display: none;
}
.delete_button {
background-color: red;
color: white;
}
.container {
display: inline-block;
}
body {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test_table.css">
</head>
<body>
<h1>Dynamic Table</h1>
<div class="container">
<table id="data" class="scroll-table">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onclick="addRow('data')" />
</div>
<script src="test_table.js"></script>
</body>
</html> 부트스트랩으로 했습니다..modal-open에적는수업되에 적용된 입니다.body 결책html {overflow-y: scroll}도움이 되지 않습니다.내가 찾은 한 가지 가능한 해결책은 추가하는 것입니다.{width: 100%; width: 100vw}에▁html요소
이전에는 이러한 문제가 있었지만 이 문제를 해결하는 간단한 방법은 다음과 같습니다(이 방법은 저에게 적합합니다).
CSS 파일 형식:
body{overflow-y:scroll;}
그렇게 간단하게! :)
calc(100vw - 100%)를 사용하여 게시된 솔루션은 올바른 방향으로 가고 있지만 다음과 같은 문제가 있습니다.콘텐츠가 전체 뷰포트를 채우도록 창 크기를 조정하더라도 스크롤 막대 크기의 왼쪽에는 여백이 계속 남아 있습니다.
미디어 쿼리를 사용하여 이 문제를 해결하려고 하면 창 크기를 조정할 때 여백이 점진적으로 줄어들지 않기 때문에 어색한 스냅이 발생합니다.
AFAIK에는 단점이 없는 솔루션이 있습니다.
마진: 자동을 사용하여 콘텐츠를 중앙에 배치하는 대신 다음을 사용합니다.
body {
margin-left: calc(50vw - 500px);
}
500px를 콘텐츠의 최대 너비의 절반으로 바꿉니다(이 예에서는 콘텐츠의 최대 너비가 1000px입니다).이제 콘텐츠는 중앙에 유지되고 콘텐츠가 뷰포트를 채울 때까지 여백은 계속 감소합니다.
뷰포트가 최대 너비보다 작을 때 여백이 음수가 되는 것을 방지하려면 다음과 같은 미디어 쿼리를 추가합니다.
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}
에트볼랴!
제 경우에는 작동하지 않았던 위의 CSS 또는 JS 기반 솔루션 대부분을 사용해 본 후, 추가하고 싶었습니다.내 솔루션은 이벤트에서 스크롤 막대가 사라져야 하는 경우(예: 버튼 클릭)에 적합합니다. 왜냐하면 페이지 스크롤이 차단되는 전체 화면 메뉴를 방금 열었기 때문입니다.
이는 다음 스타일이 회전하는 요소에 적용될 때 작동합니다.overflow-yhidden에는 (내경우는그것이에그이내것▁(▁('는)입니다.body표시됨):
body {
overflow-x: hidden;
width: 100vw;
margin-right: calc(100vw - 100%);
}
설명: Thewidth의 신의의body는 태는입니다.100vw스크롤 막대의 너비를 포함합니다.
해설을 margin-right막대 에 있지가 보이는에만 여백이 됩니다. 즉, 이 한 번도 .overflow-y변했다.
참고: 이 솔루션은 수평으로 스크롤할 수 없는 페이지에만 사용할 수 있습니다.
Chrome 89.0, Firefox 87.0, Safari 14.0.3에서 테스트됨
업데이트: 안타깝게도 100% 너비를 차지하지 않는 중앙 컨테이너에서만 작동합니다. 그렇지 않으면 스크롤 막대가 오른쪽에 있는 콘텐츠 조각을 덮어씁니다.
그 질문이 매우 오래된 것이라는 것을 알지만, 더 나은 새로운 방법이 있습니다.
scrollbar-gutter: stable;
제 접근 방식은 트랙을 투명하게 만드는 것입니다.스크롤 막대 썸 색상은 기본 스크롤 막대 썸 색상과 일치하도록 #C1C1C1입니다.당신이 원하는 것은 무엇이든 만들 수 있습니다 :)
사용해 보십시오.
html {
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 0.7em;
background-color: transparent;
}
body::-webkit-scrollbar-thumb {
background: #C1C1C1;
height:30px;
}
body::-webkit-scrollbar-track-piece
{
display:none;
}
오버플로 스크롤을 시도했지만 제 경우에는 작동하지 않았습니다.스크롤 막대는 여전히 어떤 종류의 (흰색) 패딩을 추가합니다.작동하는 것은 폭을 100vw에서 100%로 변경하는 것이지만 높이는 100vh를 사용해도 괜찮습니다. 따라서 다음과 같습니다.
const Wrapper = styled.div`
min-height: 100vh
`
const Parent = styled.div`
width: 100%
`
const Children = styled.div`
width: 100%
`
편집 부모 구성요소에 사이드바가 있고 자식 구성요소가 있기 때문에 너비를 두 번 설정했습니다.사용 사례에 따라 한 번 설정할 수 있습니다.
여기서 제 솔루션을 찾지 못했기 때문에 추가하고자 합니다.
저는 영구 스크롤바(승인된 솔루션)를 원하지 않았고 마이너스 마진도 사용하지 않기로 결정했습니다.그들은 (즉시) 크롬에서 저를 위해 일하지 않았고 저는 또한 스크롤바 아래로 콘텐츠가 사라지는 것을 원하지 않았습니다.
이것이 패딩 솔루션입니다.
내 웹 페이지는 세 부분으로 구성됩니다.
- 머리글(내용이 왼쪽 정렬됨)
- 기본 내용(내용 중심)
- 바닥글(내용이 왼쪽과 오른쪽으로 정렬됨)
머리글은 왼쪽 패딩을 입으면 안 좋아 보이고 로고는 페이지 구석에 있어야 하기 때문에 스크롤바가 나타나는 것은 대부분 영향을 주지 않기 때문에 변경하지 않았습니다(창 너비가 매우 작은 경우는 제외).
메인 콘텐츠와 바닥글 모두 짝수 패딩을 사용할 수 있기 때문에 다음 CSS 컨테이너에만 사용했습니다.
.main-content, .footer {
/*
* Set the padding to the maximum scrollbar width minus the actual scrollbar width.
* Maximum scrollbar width is 17px according to: https://codepen.io/sambible/post/browser-scrollbar-widths
*/
padding-right: calc(17px - (100vw - 100%));
padding-left: 17px;
}
이렇게 하면 주 내용이 정확한 중앙에 유지되고 최대 17px의 모든 스크롤 막대 너비에서도 작동합니다.오버레이 스크롤바가 있는 모바일 장치의 패딩을 제거하는 미디어 쿼리를 추가할 수 있습니다.이 솔루션은 왼쪽 패딩만 추가하고 너비를 "width: calc(100vw - 17px)"로 설정하는 것과 유사합니다.하지만 그것이 모든 경우에 동등하게 행동할지는 말할 수 없습니다.
나는 이것을 해결하기 위해 약간의 농담을 사용했습니다.
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});
@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}
내용이 화면에 넘치지 않더라도 브라우저 창에 영구적인 스크롤 막대를 표시하는 허용된 답변과 달리, 다음을 사용하는 것이 좋습니다.
html{
height:101%;
}
내용이 실제로 오버플로우되는 경우 스크롤 막대의 모양이 더 의미가 있기 때문입니다.
언급URL : https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page
'programing' 카테고리의 다른 글
| 내 앱 또는 앱의 종속성이 Android Advertising Id 정책을 위반합니까? (0) | 2023.08.21 |
|---|---|
| 사이트를 파괴하지 않고 web.config에 MIME 유형을 추가할 수 있습니까? (0) | 2023.08.21 |
| MariaDB-JSON-document - exact where 절을 적용한 후 인덱스를 알지 못하고 배열에서 특정 요소만 선택할 수 없습니다. (0) | 2023.08.21 |
| jQueryUncaughtTypeError: 개체 [objectWindow]의 속성 '$'이(가) 함수가 아닙니다. (0) | 2023.08.21 |
| "error: option --single-version-external-managed not recognized"는 무엇을 의미합니까? (0) | 2023.08.21 |