가로 스크롤 비활성화 [닫힘]

180

어떤 이유로 든 내 웹 페이지가 왼쪽에서 오른쪽으로 스크롤되어 추한 공간이 많이 나타납니다.

결과를 검색했지만 스크롤 막대를 숨겼습니다.

이것이 내가 원하는 것 입니다. 가로 스크롤 기능 을 물리적으로 비활성화 하고 싶습니다 . 사용자가 내 페이지에서 위아래로 스크롤하는 것을 원하지 않습니다!

나는 시도했다 : overflow-x:hidden내 html태그의 CSS에서 스크롤 막대를 숨기고 스크롤을 비활성화하지 않았습니다.

도와주세요!

~~페이지 링크는 다음과 같습니다. http://www.green-panda.com/usd309bands/~~ (Broken link)

이것은 내가 말하는 것에 대한 더 나은 아이디어를 줄 수 있습니다.

첫 페이지가로드 될 때입니다.

여기에 이미지 설명을 입력하십시오

그리고 이것은 오른쪽으로 스크롤 한 후에입니다.

여기에 이미지 설명을 입력하십시오

html css

— 사용자 2371301
소스

1

가로 스크롤 막대가 없으면 어떻게 가로로 스크롤 할 수 있습니까?

— 냉동 완두콩의 Roddy

9

마우스를 두 손가락으로 랩탑에서 왼쪽에서 오른쪽으로갑니다.

— user2371301

1

호기심에서 페이지의 기본 스크롤 막대를 만드는 것은 무엇입니까?

— Trojan

4

스크롤 막대없이 스크롤하는 방법? Windows에서 마우스 휠 클릭 드래그

— Nayuki

여분의 패딩이있는 블록이 있어야합니다. 즉, 100 % 너비를 늘려 제거하는 것이 좋습니다

— 발진

494

이것을 CSS에 추가하십시오

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

— 코알라 _ 데브
소스

5

잘 작동했습니다. 내가 말하고있는 것을 이해 한 사람을 발견하게되어 기쁩니다! 최대한 빨리 받아들이겠습니다.

— user2371301

44

Chrome 34에서는 스크롤이 실제로 방지되지 않습니다. 스크롤 막대를 숨기지 만 가운데 버튼 스크롤을 사용하면 왼쪽에서 숨겨진 요소를 계속 볼 수 있습니다.

— gphilip

2

브라우저 창을 가장 작은 용량으로 최소화하면 작동하지 않습니다.

— dspacejs

4

: - / 인한 터치 / 모멘텀이 아이폰에 작동하지 스크롤

— MarkWPiper

2

나는 당신을 사랑합니다 !!

— rochasdv

13

이것은 코드의 불쾌한 아이입니다 :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

그것을 대체

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

— 압둘 말릭
소스

13

따라서이 문제를 올바르게 해결하기 위해 다른 사람들이 한 일을하고 CSS를 사용하여 가로 도구 모음을 숨겼습니다.

.name {
  max-width: 100%;
  overflow-x: hidden;
}

그런 다음 js에서 스크롤을 찾을 이벤트 리스너를 만들고 사용자가 가로 스크롤을 시도하는 것을 막았습니다.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

누군가 비슷한 일을하는 것을 보았지만 분명히 효과가 없었습니다. 그러나 이것은 나를 위해 완벽하게 작동합니다.

— 딜런 코프
소스

이것은 나를 위해 작동합니다. 그러나 스 와이프 할 때 모바일에 지터가 있습니다. 동작이 느려지는 동안.

— 거의 눈에 띄지 않음

"적절하게"확실하지는 않지만 여전히 훌륭하고 창의적인 답변입니다.

— Feathercrown

9

너무 늦었다는 것을 알고 있지만 자바 스크립트에는 html 요소가 수평 오버플로-> 스크롤 막대를 일으키는 것을 감지하는 데 도움이되는 접근법이 있습니다.

CSS 트릭 에 대한 게시물 링크는 다음과 같습니다.

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

그것은 다음과 같은 것을 반환 할 수 있습니다 :

<div class="div-with-extra-width">...</div>

그런 다음 추가 너비를 제거 div하거나max-width:100%

도움이 되었기를 바랍니다!

그것은 나를 위해 문제를 해결했다 :]

— 무스
소스

사이트 참고로, boundingClientRect는 offsetWidth를보다 정확 : - developer.mozilla.org/en-US/docs/Web/API/Element/... - stackoverflow.com/questions/43537559/...

— 바보

절대 생명의 은인!

— 꼬리

8

본문에만 너비 스크롤을 사용하지 않으려면이 방법을 사용하십시오. 모든 문서는 본문입니다. body{overflow-x: hidden;}

— easa
소스

5

koala_dev는 다음과 같이 작동한다고 답변했습니다.

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

MarkWPiper는 ":-/ 터치 / 운동량 스크롤로 인해 iPhone에서 작동이 중지되었습니다"라고 말합니다.

iPhone에서 터치 / 모멘텀을 유지하는 솔루션은 HTML, body의 CSS 블록 안에이 줄을 추가하는 것입니다.

    height:auto!important;

— ffffff
소스

어디에 넣을 까? 본문 태그 또는 작은 화면에 대한 미디어 쿼리에서

— Umair

1

@Umair thanks-높이를 명확히하기 위해 주석을 편집했습니다. 자동 줄은 html, body css 블록에 들어갑니다.

— ffffff

높이에 감사드립니다. 자동 솔루션!

— Torben

2

Koala_dev의 답변은 효과가 있지만 이것이 궁금한 경우 이것이 작동하는 이유입니다.

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.

.

— SchadeM
소스

Thx, 나는 교육을 좋아했다.

— Pimp Trizkit

2

전체 화면 너비에서 가로 스크롤을 사용하지 않으려면이 코드를 사용하십시오.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

스 니펫 확장

부모 너비를 무시하고 대신 뷰포트를 사용하기 때문에 "100 %"보다 낫습니다.

— 파비안 폰 엘레 르트
소스

2

html 페이지에서이 모든 방법을 시도해 볼 수 있습니다.

첫번째 방법

body { overflow-x:hidden; }

두 번째 방법 CSS 본문 태그에서 다음을 사용할 수 있습니다.

overflow-y: scroll; overflow-x: hidden;

스크롤바가 제거됩니다.

세번째 방법

body { min-width: 1167px; }

다섯 번째 방법

html, body { max-width: 100%; overflow-x: hidden; }

여섯 번째 방법

element { max-width: 100vw; overflow-x: hidden; }

네번째 방법

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

이제 더 검색 중입니다 .. !!!!

— 스리 크루 쉬나
소스

1

방금 직접 처리해야했습니다. 결국이 방법이 가장 쉽고 유용하다는 것을 알았습니다. 그냥 추가

overflow-x: hidden;

당신의 외부 부모에게. 제 경우에는 다음과 같습니다.

<body style="overflow-x: hidden;">

당신은 사용할 필요가 overflow-x단순히 사용하는 경우 사용하기 때문에 overflow당신이 즉, 너무 수직 스크롤을 사용하지 않도록 설정overflow-y

세로 스크롤이 여전히 비활성화 된 경우 다음을 사용하여 명시 적으로 활성화 할 수 있습니다.

overflow-y: scroll;

모든 것이 제대로 설정되면이 빠르고 더러운 방법을 사용할 필요가 없기 때문에 적절한 방법이 아니라는 것을 알고 있습니다.

— 바보
소스

1

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

위의 스타일을 적용하거나 JavaScript 에서 해당 문제를 해결하기 위해 함수를 만들 수 있습니다

— 루시 케 모어
소스

0

JavaScript로 본문 스크롤 이벤트를 재정의하고 가로 스크롤을 0으로 재설정 할 수 있습니다.

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

화면이 작은 사용자의 기능이 제한되므로이 작업을 수행하지 않는 것이 좋습니다.

— 오스틴 브 런크 호스트
소스

2

나는 CSS 수정이 우에도이 :( 일을하지 않는, 내 프로젝트에서 작동하지 않습니다이 밖으로 시도하는거야

— 레온 Gaban

이것은 나를 위해 작동하지 않습니다

— Souhail Ben Slimene