스크롤하는 자식 div가 창을 스크롤합니다. 어떻게 중지합니까?

스크롤 막대가있는 div가 있고 끝에 도달하면 페이지가 스크롤되기 시작합니다. 어쨌든이 동작을 멈출 수 있습니까?

다음과 같이 수행하여 전체 페이지의 스크롤을 비활성화 할 수 있습니다.

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>

해결책을 찾았습니다.

http://jsbin.com/itajok

이것이 내가 필요한 것입니다.

그리고 이것이 코드입니다.

http://jsbin.com/itajok/edit#javascript,html

jQuery 플러그인을 사용합니다.

지원 중단 알림으로 인한 업데이트

에서 JQuery와 - 마우스 휠 :

이벤트 핸들러에 세 개의 인수 ( delta, deltaX및 deltaY)를 추가하는 이전 동작 은 이제 더 이상 사용되지 않으며 이후 릴리스에서 제거됩니다.

event.deltaY이제 다음을 사용해야합니다.

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

데모

선택한 솔루션은 예술 작품입니다. 플러그인의 가치가 있다고 생각했습니다 ....

$.fn.scrollGuard = function() {
    return this
        .on( 'wheel', function ( e ) {
            var event = e.originalEvent;
            var d = event.wheelDelta || -event.detail;
            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
};    

이것은 나에게 지속적인 불편 함이었고이 솔루션은 내가 본 다른 해킹에 비해 너무 깨끗합니다. 그것이 어떻게 작동하고 얼마나 널리 지원되는지에 대해 더 궁금해하지만 Jeevan과 처음에 이것을 생각해 낸 누구에게나 환호합니다. BTW-stackoverflow 답변 편집기가 필요합니다!

최신 정보

DOM을 전혀 조작하지 않고 조건부로만 버블 링을 방지한다는 점에서 이것이 더 낫다고 생각합니다.

$.fn.scrollGuard2 = function() {
  return this
    .on( 'wheel', function ( e ) {
      var $this = $(this);
      if (e.originalEvent.deltaY < 0) {
        /* scrolling up */
        return ($this.scrollTop() > 0);
      } else {
        /* scrolling down */
        return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
      }
    })
  ;
};    

크롬에서 훌륭하게 작동하고 다른 솔루션보다 훨씬 간단합니다 ... 다른 곳에서 어떻게 작동하는지 알려주세요 ...

깡깡이

div에서 mouseover 이벤트를 사용하여 본문 스크롤바를 비활성화 한 다음 mouseout 이벤트를 사용하여 다시 활성화 할 수 있습니까?

예 : HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

그런 다음 자바 스크립트는 다음과 같습니다.

var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
    body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
    body.style.overflowY = 'auto';
}

Y 축에서이 작업을 수행하는 브라우저 간 방법은 데스크톱 및 모바일에서 작동합니다. OSX 및 iOS에서 테스트되었습니다.

var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var deltaY = event.deltaY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

scrollArea.addEventListener("touchmove", function(event) {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var currentClientY = event.touches[0].clientY;
    var deltaY = this.previousClientY - currentClientY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
    this.previousClientY = currentClientY;
}, {passive:false});

이 문제에 대한 해결책을 썼습니다.

  var div;
  div = document.getElementsByClassName('selector')[0];

  div.addEventListener('mousewheel', function(e) {
    if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
      e.preventDefault();
      div.scrollTop = div.scrollHeight;
    } else if (div.scrollTop + e.deltaY <= 0) {
      e.preventDefault();
      div.scrollTop = 0;
    }
  }, false);

귀하의 질문을 올바르게 이해했다면 마우스가 div 위에있을 때 주요 콘텐츠 스크롤을 방지하고 싶습니다 (사이드 바라고 가정 해 보겠습니다). 이를 위해 사이드 바는 스크롤 이벤트가 부모에게 버블 링되는 것을 방지하기 위해 기본 콘텐츠 (브라우저 창)의 스크롤 컨테이너의 자식이 아닐 수 있습니다.

다음과 같은 방식으로 일부 마크 업 변경이 필요할 수 있습니다.

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div> 

그것에서 일하고 참조하십시오 이 샘플 바이올린 과 비교하여 해당 이 샘플 바이올린 사이드 바의 약간 다른 마우스 휴가 동작이 있습니다.

브라우저의 기본 스크롤바로 특정 div 하나만 스크롤하는 것도 참조하십시오 .

여기 에서 대답했듯이 대부분의 최신 브라우저는 이제 overscroll-behavior: none;스크롤 체인을 방지 하는 CSS 속성을 지원합니다 . 그리고 그게 바로 한 줄입니다!

이렇게하면 선택기 요소를 입력하면 창에서 스크롤이 비활성화됩니다. 매력처럼 작동합니다.

elements = $(".selector");

elements.on('mouseenter', function() {
    window.currentScrollTop = $(window).scrollTop();
    window.currentScrollLeft = $(window).scrollTop();
    $(window).on("scroll.prevent", function() {
        $(window).scrollTop(window.currentScrollTop);
        $(window).scrollLeft(window.currentScrollLeft);
    });
});

elements.on('mouseleave', function() {
    $(window).off("scroll.prevent");
});

이렇게하면 전체 페이지 스크롤을 비활성화 할 수 있지만 스크롤바는 표시됩니다!

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>

$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
  var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
  var scrollTop = this.scrollTop;
  if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
    e.preventDefault();
  }
});

ceed의 답변에 따라 스크롤 보호 요소 중첩을 허용하는 버전이 있습니다. 마우스가있는 요소 만 스크롤되며 매우 부드럽게 스크롤됩니다. 이 버전은 재진입도 가능합니다. 동일한 요소에서 여러 번 사용할 수 있으며 핸들러를 올바르게 제거하고 다시 설치합니다.

jQuery.fn.scrollGuard = function() {
    this
        .addClass('scroll-guarding')
        .off('.scrollGuard').on('mouseenter.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g[0].myCst = $g.scrollTop();
            $g[0].myCsl = $g.scrollLeft();
            $g.off("scroll.prevent").on("scroll.prevent", function() {
                $g.scrollTop($g[0].myCst);
                $g.scrollLeft($g[0].myCsl);
            });
        })
        .on('mouseleave.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g.off("scroll.prevent");
        });
};

사용하기 쉬운 한 가지 방법 scroll-guard은 스크롤을 허용하는 페이지의 모든 요소에 와 같은 클래스를 추가하는 것 입니다. 그런 다음 $('.scroll-guard').scrollGuard()그들을 보호 하기 위해 사용하십시오 .

overflow: hidden스타일 을 적용하면 사라져야합니다

편집 : 실제로 나는 당신의 질문을 잘못 읽었습니다. 그것은 스크롤 바를 숨길 뿐이지 만 당신이 찾고있는 것이 아니라고 생각합니다.

Chrome과 Firefox에서 작동하는 데 대한 답을 얻을 수 없었기 때문에 다음과 같은 통합을 생각해 냈습니다.

$someElement.on('mousewheel DOMMouseScroll', scrollProtection);

function scrollProtection(event) {
    var $this = $(this);
    event = event.originalEvent;
    var direction = (event.wheelDelta * -1) || (event.detail);
    if (direction < 0) {
        if ($this.scrollTop() <= 0) {
            return false;
        }
    } else {
        if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
            return false;
        }
    }
}