JavaScript로 가로 스크롤 사용 안 함

Question

JavaScript를 사용하여 가로 스크롤 막대를 비활성화 할 수있는 방법이 있는지 알고 있습니까?

나는 overflow-x: hidden;을 사용하고 싶지 않습니다.

Answer 1

완벽하게 실행할 수있는 overflow-x CSS 속성을 사용하지 않으면 자바 스크립트 또는 HTML/CSS 디자인을 통해 스크롤 막대가 필요하지 않도록 콘텐츠의 크기를 조정할 수 있습니다.

또한이 작업을 수행 할 수 있습니다 : 어떤 스크롤을 감지하고 자동으로 왼쪽 상단/스크롤을 반환합니다

window.onscroll = function() { 
window.scrollTo(0,0); 
} 

.... 이처럼 뭔가를하면 사용자를 좌절시킬 수 있습니다.

CSS를 통해 디자인을 통해 원치 않는 UI 요소가 전혀 표시되지 않는 환경을 만드는 것이 가장 좋습니다. 위에서 언급 한 접근 방식은 불필요한 UI 요소 (스크롤 막대)를 보여주고 사용자가 예상하는 방식으로 작동하지 않게합니다 (페이지 스크롤). 당신은 사용자와 "계약을 맺었습니다"- 사용자가 친숙한 행동을 취할 때 나머지 웹 사이트 나 응용 프로그램이 예상 한 것을 수행 할 것이라고 어떻게 신뢰할 수 있습니까?

Answer 2

jQuery를 아래로 스크롤의 요소 방지하는 방법 :에

$(element).scroll(function() { 
    this.scrollTop = 0; 
    this.scrollLeft = 0; 
}); 

글쎄,이 실제로 스크롤을 방지하지 않지만, 요소의 왼쪽 상단 모서리에 그것을 "다시 스크롤", 유사 Chris의 솔루션으로, 단일 요소 대신 창을 위해 생성되었습니다. 필요에 맞게 scrollTop 또는 scrollLeft 행을 삭제하십시오.

Answer 3

더러운 속임수는 스크롤 막대와 겹치기 일 것입니다 : http://jsfiddle.net/dJqgf/.

var overlap = $('<div id=b>'); 

$("#a").wrap($('<div>')); 

$("#a").parent().append(overlap); 

함께 : 당신은 스크롤 막대를 숨기고 당신이 그것을 표시 할 때 다음을 제거 할 때 정말

#a { 
    width: 100px; 
    height: 200px; 
    overflow-x: scroll; 
} 

#b { 
    position: relative; 
    left: 0; 
    bottom: 20px; 
    width: 100%; 
    height: 20px; 
    background-color: white; 
}