복붙노트

[JQUERY] 방지 때 내부 소자 스크롤 위치에 도달 위쪽 / 아래쪽 부모 요소의 스크롤? [복제]

JQUERY

방지 때 내부 소자 스크롤 위치에 도달 위쪽 / 아래쪽 부모 요소의 스크롤? [복제]

해결법

  1. 1.그것은 브랜든 아론의 마우스 휠 플러그인의 사용으로 가능합니다.

    그것은 브랜든 아론의 마우스 휠 플러그인의 사용으로 가능합니다.

    여기 데모는 다음과 같습니다 http://jsbin.com/jivutakama/edit?html,js,output

  2. 2.@amustill에 의해 허용 대답이 제대로 Internet Explorer에서 문제가 해결되지 않기 때문에 나는 완전성이 대답을 추가하고있다. 자세한 내용은 내 원래의 게시물의 주석을 참조하십시오. 단지 jQuery를 - 또한,이 솔루션은 어떤 플러그인을 필요로하지 않습니다.

    @amustill에 의해 허용 대답이 제대로 Internet Explorer에서 문제가 해결되지 않기 때문에 나는 완전성이 대답을 추가하고있다. 자세한 내용은 내 원래의 게시물의 주석을 참조하십시오. 단지 jQuery를 - 또한,이 솔루션은 어떤 플러그인을 필요로하지 않습니다.

    본질적으로, 코드는 마우스 휠 이벤트를 처리하여 작동합니다. 이러한 각각의 이벤트는 wheelDelta 스크롤 영역으로 이동하려고 픽셀의 수만큼 포함한다. 이 값이 0>의 경우, 우리는 위로 스크롤된다. wheelDelta 0 <의 경우, 우리는 아래로 스크롤된다.

    파이어 폭스 파이어 폭스 이벤트로 DOMMouseScroll를 사용하고으로 채워 누구가 +/- 상술 된 것과 반대로, originalEvent.detail. 그것은 일반적으로 다른 브라우저 (내 컴퓨터에 적어도) (120)의 간격으로 스크롤 돌려주는 동안, 3의 간격을 반환합니다. 해결하려면, 우리는 단순히 그것을 감지하고 다중 -40에 의해 정상화.

    @ amustill의 대답은

    의 스크롤 영역은 상단 또는 하단 최대 위치에 하나 이미 켜져있는 경우 이벤트를 취소하는 방식으로 작동합니다. 그러나 Internet Explorer는 델타가 남아있는 스크롤 공간보다 큰 상황에서 취소 된 이벤트를 무시합니다.

    즉,이 경우 200 픽셀 높이

    스크롤 내용의 500 픽셀을 포함, 현재 scrollTop (400), 브라우저를 알려주는 마우스 휠 이벤트에 스크롤 120 픽셀 더
    와 모두가 발생합니다 스크롤, 400 + 120> 500 때문이다.

    그래서 - 문제를 해결하기 위해, 우리는 다음과 같이하는 것과는 조금 차이가 있습니다 :

    필요한 jQuery 코드는 다음과 같습니다

    $(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

    본질적으로,이 코드는 불필요한 가장자리 조건을 생성하는 어떤 스크롤링 이벤트를 취소 한 후 마우스 휠 이벤트가 요구 된 방향에 따라 상기

    에 최대 또는 중 최소값의 scrollTop을 설정 jQuery를 사용한다.

    이벤트가 어느 경우에 완전히 취소되기 때문에 전혀 몸에 전파하지, 따라서 IE의 문제뿐만 아니라 모든 다른 브라우저를 해결 않았다.

    또한 jsFiddle에 작업 예를 뒀다.

  3. 3.네이티브 - - DOM을 재정렬 및 ​​/ 또는 이벤트 방지 트릭을 사용하지 않고이 문제를 해결하는 방법이 스레드에 주어진 모든 솔루션은 기존 언급하지 않습니다. 그러나 좋은 이유가이 방법은 독점 - MS의 웹 플랫폼에서만 가능한. MSDN을 인용 :

    네이티브 - - DOM을 재정렬 및 ​​/ 또는 이벤트 방지 트릭을 사용하지 않고이 문제를 해결하는 방법이 스레드에 주어진 모든 솔루션은 기존 언급하지 않습니다. 그러나 좋은 이유가이 방법은 독점 - MS의 웹 플랫폼에서만 가능한. MSDN을 인용 :

    설령,이 속성은 IE10 + / 에지에서 지원됩니다. 그럼에도 불구하고, 여기에 말하는 견적입니다 :

    이제 좋은 소식, 모두! 크롬 63부터 시작, 우리는 마침내 너무 깜박임 기반 플랫폼을위한 네이티브 치료 - 그리고 그 크롬 (명백하게)과 안드로이드 웹보기 (곧) 모두입니다.

    도입부 기사를 인용 :

    여기에 액션이 특징이다. 그리고 여기에 CSS 모듈 문서를 해당합니다.

    UPDATE : 파이어 폭스는 버전 59부터 클럽에 가입하고 있으며, MS 가장자리 (18)가 여기에 해당 caniusage 버전에서이 기능을 구현 할 것으로 예상된다.

  4. 4.나는 그것이 아주 오래된 질문 알지만,이 구글에서 최고 결과 중 하나이기 때문에 ... 내가 가지고 어떻게 든 jQuery를하지 않고 스크롤 버블 링을 취소하고 나를 위해이 코드 작동 :

    나는 그것이 아주 오래된 질문 알지만,이 구글에서 최고 결과 중 하나이기 때문에 ... 내가 가지고 어떻게 든 jQuery를하지 않고 스크롤 버블 링을 취소하고 나를 위해이 코드 작동 :

    function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  
}

document.getElementById('a').onmousewheel = function(e) { 
  document.getElementById('a').scrollTop -= e. wheelDeltaY; 
  preventDefault(e);
}

  5. 5.편집 : CodePen 예

    편집 : CodePen 예

    AngularJS와, 나는 다음과 같은 지침을 정의 :

    module.directive('isolateScrolling', function () {
  return {
    restrict: 'A',
      link: function (scope, element, attr) {
        element.bind('DOMMouseScroll', function (e) {
          if (e.detail > 0 && this.clientHeight + this.scrollTop == this.scrollHeight) {
            this.scrollTop = this.scrollHeight - this.clientHeight;
            e.stopPropagation();
            e.preventDefault();
            return false;
          }
          else if (e.detail < 0 && this.scrollTop <= 0) {
            this.scrollTop = 0;
            e.stopPropagation();
            e.preventDefault();
            return false;
          }
        });
        element.bind('mousewheel', function (e) {
          if (e.deltaY > 0 && this.clientHeight + this.scrollTop >= this.scrollHeight) {
            this.scrollTop = this.scrollHeight - this.clientHeight;
            e.stopPropagation();
            e.preventDefault();
            return false;
          }
          else if (e.deltaY < 0 && this.scrollTop <= 0) {
            this.scrollTop = 0;
            e.stopPropagation();
            e.preventDefault();
            return false;
          }

          return true;
        });
      }
  };
});

    그리고 스크롤 요소 (드롭 다운 메뉴 UL)에 추가 :

    <div class="dropdown">
  <button type="button" class="btn dropdown-toggle">Rename <span class="caret"></span></button>
  <ul class="dropdown-menu" isolate-scrolling>
    <li ng-repeat="s in savedSettings | objectToArray | orderBy:'name' track by s.name">
      <a ng-click="renameSettings(s.name)">{{s.name}}</a>
    </li>
  </ul>
</div>

    크롬과 파이어 폭스에서 테스트. 크롬의 부드러운 스크롤은 큰 마우스 휠의 움직임이 (그러나에) 근처에 만든이 해킹 스크롤 영역의 상단 또는 하단을 패배.

  6. 6.이 많은 답변이 아웃이 같은 질문의 톤이있다, 그러나 나는 바로 HTML과 CSS에 보관하고 싶었 등 이벤트, 스크립트, 플러그인을 포함하지 않은 만족스러운 해결책을 찾을 수 없습니다. 이 이벤트 체인을 깰 마크 업 구조 조정과 관련된 비록 내가 마지막으로 일한 해결책을 발견.

    이 많은 답변이 아웃이 같은 질문의 톤이있다, 그러나 나는 바로 HTML과 CSS에 보관하고 싶었 등 이벤트, 스크립트, 플러그인을 포함하지 않은 만족스러운 해결책을 찾을 수 없습니다. 이 이벤트 체인을 깰 마크 업 구조 조정과 관련된 비록 내가 마지막으로 일한 해결책을 발견.

    1. 기본 문제

    모달 소자에인가되는 입력 (즉 : 휠) 스크롤링 상위 요소로 파급 일부 이러한 요소가 스크롤 가능한 경우, 같은 방향으로 이동한다 :

    (모든 예제는 바탕 화면 해상도에 볼 수 있도록 의미)

    https://jsfiddle.net/ybkbg26c/5/

    HTML :

    <div id="parent">
  <div id="modal">
    This text is pretty long here.  Hope fully, we will get some scroll bars.
  </div>
</div>

    CSS :

    #modal {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 20%;
  left: 20%;
  overflow-y: scroll;
}
#parent {
  height: 4000px;
}

    모달 스크롤 2. 없음 부모 스크롤

    스크롤 이벤트가 거품과 체인에 대한 몇 가지 요소를 처리 할 수 ​​있기 때문에 스크롤 최대 조상의 끝이 이유. 그것을 막을 방법은 스크롤을 처리하는 방법을 체인 노하우의 요소을 미치지 않도록하기 위해입니다. 예제의 관점에서, 우리는 부모 요소의 모달 밖으로 이동하는 트리를 리팩토링 할 수 있습니다. 모호한 이유로, 부모와 모달 DOM 형제를 유지하는 것만으로는 충분하지 않습니다; 부모는 새로운 스택 문맥을 설정 다른 요소에 의해 포장해야합니다. 부모 주변의 절대적 위치 래퍼 트릭을 할 수 있습니다.

    우리가 얻는 결과는 그만큼 모달 스크롤 이벤트를 수신 할 때, 이벤트 것 "부모"요소에 없습니다 거품.

    일반적으로 최종 사용자에게 표시에 영향을주지 않고이 동작을 지원하기 위해 DOM 트리를 재 설계 할 수 있어야한다.

    https://jsfiddle.net/0bqq31Lv/3/

    HTML :

    <div id="context">
  <div id="parent">
  </div>
</div>
<div id="modal">
  This text is pretty long here.  Hope fully, we will get some scroll bars.
</div>

    CSS (새 전용) :

    #context {
  position: absolute;
  overflow-y: scroll;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

    그것을 사용하는 동안 3. 아니 어디 모달 제외 스크롤

    여전히 위의 솔루션은 부모들이 모달 창에 의해 차단되지 않는 한, 스크롤 이벤트를 수신 할 수 있습니다 (즉, 커서가 모달 위에 있지 않을 때 마우스 휠에 의해 트리거 경우). 이것은 때때로 바람직하지 않으며 모달가있는 동안 우리는 모든 배경 스크롤을 금지 할 수 있습니다. 이를 위해, 우리는 별도의 스택 문맥을 삽입해야 스팬이 모달 뒤에 전체 뷰포트. (: 숨겨진하지만 가시성) 우리는 필요가있는 경우 완전히 투명하게 할 수있는 절대 위치 오버레이를 표시하여 해당 작업을 수행 할 수 있습니다.

    https://jsfiddle.net/0bqq31Lv/2/

    HTML :

    <div id="context">
  <div id="parent">
  </div>
</div>
<div id="overlay">  
</div>
<div id="modal">
  This text is pretty long here.  Hope fully, we will get some scroll bars.
</div>

    CSS (# 2 위에 신규) :

    #overlay {
  background-color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

  7. 7.스크롤하거나 마우스 휠 처리 성능 문제를 방지하기 위해 변형, 당신은 다음과 같은 코드를 사용할 수 있습니다 :

    스크롤하거나 마우스 휠 처리 성능 문제를 방지하기 위해 변형, 당신은 다음과 같은 코드를 사용할 수 있습니다 :

    CSS :

    body.noscroll {
    overflow: hidden;
}
.scrollable {
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

    HTML :

    <div class="scrollable">
...A bunch of items to make the div scroll...
</div>
...A bunch of text to make the body scroll...

    JS :

    var $document = $(document),
    $body = $('body'),
    $scrolable = $('.scrollable');

$scrolable.on({
          'mouseenter': function () {
            // add hack class to prevent workspace scroll when scroll outside
            $body.addClass('noscroll');
          },
          'mouseleave': function () {
            // remove hack class to allow scroll
            $body.removeClass('noscroll');
          }
        });

    작업의 예 : http://jsbin.com/damuwinarata/4

  8. 8.다음은 일반 자바 스크립트 버전입니다 :

    다음은 일반 자바 스크립트 버전입니다 :

    function scroll(e) {
  var delta = (e.type === "mousewheel") ? e.wheelDelta : e.detail * -40;
  if (delta < 0 && (this.scrollHeight - this.offsetHeight - this.scrollTop) <= 0) {
    this.scrollTop = this.scrollHeight;
    e.preventDefault();
  } else if (delta > 0 && delta > this.scrollTop) {
    this.scrollTop = 0;
    e.preventDefault();
  }
}
document.querySelectorAll(".scroller").addEventListener("mousewheel", scroll);
document.querySelectorAll(".scroller").addEventListener("DOMMouseScroll", scroll);

  9. 9.나는 각 지시어를 포장했다. 다음은 여기에 다른 답변의 매쉬업입니다. 크롬 및 Internet Explorer 11에서 테스트.

    나는 각 지시어를 포장했다. 다음은 여기에 다른 답변의 매쉬업입니다. 크롬 및 Internet Explorer 11에서 테스트.

    var app = angular.module('myApp');

app.directive("preventParentScroll", function () {
    return {
        restrict: "A",
        scope: false,
        link: function (scope, elm, attr) {
            elm.bind('mousewheel', onMouseWheel);
            function onMouseWheel(e) {
                elm[0].scrollTop -= (e.wheelDeltaY || (e.originalEvent && (e.originalEvent.wheelDeltaY || e.originalEvent.wheelDelta)) || e.wheelDelta || 0);
                e.stopPropagation();
                e.preventDefault();
                e.returnValue = false;
            }
        }
    }
});

    용법

    <div prevent-parent-scroll>
    ...
</div>

    이 구글 검색에서 여기에 도착 다음 사람을 도움이 희망.

  10. 10.마우스 휠 플러그인의 델타 값으로 기본 요소 스크롤 속성을 사용하여 :

    마우스 휠 플러그인의 델타 값으로 기본 요소 스크롤 속성을 사용하여 :

    $elem.on('mousewheel', function (e, delta) {
    // Restricts mouse scrolling to the scrolling range of this element.
    if (
        this.scrollTop < 1 && delta > 0 ||
        (this.clientHeight + this.scrollTop) === this.scrollHeight && delta < 0
    ) {
        e.preventDefault();
    }
});

  11. 11.경우 사람이 아직 이것에 대한 해결책을 찾고, 다음과 같은 플러그인은 작업 http://mohammadyounes.github.io/jquery-scrollLock/을한다

    경우 사람이 아직 이것에 대한 해결책을 찾고, 다음과 같은 플러그인은 작업 http://mohammadyounes.github.io/jquery-scrollLock/을한다

    그것은 완전히 부모 요소에 전파를 방지 주어진 컨테이너 내에서 마우스 휠 스크롤 잠금의 문제를 해결합니다.

    그것은 휠 스크롤 속도를 변경하지 않고, 사용자 경험은 영향을받지 않습니다. 당신은 상관없이 (이 하나 개의 화면 또는 노치 당 100 개 라인 한 줄까지 설정할 수 있습니다 Windows의 경우)이 OS 마우스 휠 수직 스크롤 속도의 같은 동작을 얻을.

    데모 : http://mohammadyounes.github.io/jquery-scrollLock/example/

    출처 : https://github.com/MohammadYounes/jquery-scrollLock

  12. 12.녹아웃 핸들러로 amustill의 대답 :

    녹아웃 핸들러로 amustill의 대답 :

    ko.bindingHandlers.preventParentScroll = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        $(element).mousewheel(function (e, d) {
            var t = $(this);
            if (d > 0 && t.scrollTop() === 0) {
                e.preventDefault();
            }
            else {
                if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
                    e.preventDefault();
                }
            }
        });
    }
};

  13. 13.방법은 위의 내가 더 좋은 해결책을 찾기 인터넷 검색을 몇 후, 그 자연되지 않으며, jQuery를의 필요. [1] 참조 데모 [2].

    방법은 위의 내가 더 좋은 해결책을 찾기 인터넷 검색을 몇 후, 그 자연되지 않으며, jQuery를의 필요. [1] 참조 데모 [2].

    VAR 소자 = document.getElementById를 ( 'UF-통지-UL'); VAR isMacWebkit = (navigator.userAgent.indexOf ( "매킨토시")! == -1 && navigator.userAgent.indexOf ( "웹킷") == -1)! VAR isFirefox = (navigator.userAgent.indexOf ( "파이어") == -1!); element.onwheel = wheelHandler; // 미래 브라우저 element.onmousewheel = wheelHandler; // 현재 대부분의 브라우저 경우 (isFirefox) { element.scrollTop = 0; element.addEventListener ( "DOMMouseScroll", wheelHandler, 거짓); } //이 parrent 요소를 스크롤 방지 wheelHandler 함수 (이벤트) { var에 전자 = 이벤트 || window.event를; // 표준 또는 IE 이벤트 객체 // 찾고, 이벤트 객체에서 회전의 양을 추출 // 휠 이벤트 객체의 속성를 들어, 마우스 휠 이벤트 객체 // (모두의 2D 및 1D 형태), 그리고 파이어 폭스 DOMMouseScroll 이벤트입니다. 화면을 향해 하나 "클릭"은 30 개 픽셀 그래서 // 델타을 확장 할 수 있습니다. // 미래의 브라우저는 같은은 "바퀴"와 "마우스 휠"모두를 해고하는 경우 // 이벤트, 우리는 여기에 두 번 계산 될 겁니다. 바라 건데, 그러나, // 마우스 휠의 발생을 방지 할 수 휠 이벤트를 취소. VAR위한 deltaX = e.deltaX * -30 || // 휠 이벤트 e.wheelDeltaX / 4 || // 마우스 휠 0; // 속성은 정의되지 VAR deltaY에 = e.deltaY * -30 || // 휠 이벤트 e.wheelDeltaY / 4 || 웹킷에서 // 마우스 휠 이벤트 (e.wheelDeltaY === 정의되지 않은 && // 더 2D 속성은 다음이없는 경우 e.wheelDelta / 4) || // 1 차원 휠 속성을 사용하여 e.detail * -10 || // 파이어 폭스 DOMMouseScroll 이벤트 0; // 속성은 정의되지 // 대부분의 브라우저는 마우스 휠 클릭 당 델타 (120)와 하나 개의 이벤트를 생성합니다. //에 맥이, 그러나, mousewheels는 속도에 민감한 것 같다 및 // 델타 값은 120 종종 큰 배수에서 아르 // 애플 마우스와 최소. 사용이 패배 브라우저 테스트. 경우 (isMacWebkit) { 위한 deltaX / = 30; deltaY에 / = 30; } e.currentTarget.scrollTop - = deltaY에; // 우리가 이제까지의 마우스 휠 또는 휠 이벤트 (의 미래 버전) 얻는 경우 // 파이어 폭스, 우리는 DOMMouseScroll에게 더 이상 필요하지 않습니다. 경우 (isFirefox && e.type! == "DOMMouseScroll") { element.removeEventListener ( "DOMMouseScroll", wheelHandler, 거짓); } //이 이벤트 거품을하지 마십시오. 어떤 기본 동작을 방지합니다. //이 스크롤 마우스 휠 이벤트를 사용하는 브라우저를 중지 // 문서. 희망 휠 이벤트에서 preventDefault ()를 호출 // 또한 대한 마우스 휠 이벤트의 발생을 방지 할 수 있습니다 // 같은 회전. 경우 (e.preventDefault) e.preventDefault (); 경우 (e.stopPropagation) e.stopPropagation (); e.cancelBubble 사실 =; // IE 이벤트 e.returnValue = 거짓; // IE 이벤트 false를 반환; }

    [1] https://dimakuzmich.wordpress.com/2013/07/16/prevent-scrolling-of-parent-element-with-javascript/

    [2] http://jsfiddle.net/dima_k/5mPkB/1/

  14. 14.이것은 실제로 AngularJS와 작동합니다. 크롬과 파이어 폭스에서 테스트.

    이것은 실제로 AngularJS와 작동합니다. 크롬과 파이어 폭스에서 테스트.

    .directive('stopScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('mousewheel', function (e) {
                var $this = $(this),
                    scrollTop = this.scrollTop,
                    scrollHeight = this.scrollHeight,
                    height = $this.height(),
                    delta = (e.type == 'DOMMouseScroll' ?
                    e.originalEvent.detail * -40 :
                        e.originalEvent.wheelDelta),
                    up = delta > 0;

                var prevent = function() {
                    e.stopPropagation();
                    e.preventDefault();
                    e.returnValue = false;
                    return false;
                };

                if (!up && -delta > scrollHeight - height - scrollTop) {
                    // Scrolling down, but this will take us past the bottom.
                    $this.scrollTop(scrollHeight);
                    return prevent();
                } else if (up && delta > scrollTop) {
                    // Scrolling up, but this will take us past the top.
                    $this.scrollTop(0);
                    return prevent();
                }
            });
        }
    };
})

  15. 15.내 jQuery 플러그인 :

    내 jQuery 플러그인 :

    $('.child').dontScrollParent();

$.fn.dontScrollParent = function()
{
    this.bind('mousewheel DOMMouseScroll',function(e)
    {
        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

        if (delta > 0 && $(this).scrollTop() <= 0)
            return false;
        if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
            return false;

        return true;
    });
}

  16. 16.나는 비슷한 상황을 가지고 있고 내가 그것을 해결 방법은 다음과 : 내 모든 스크롤 요소는 클래스 스크롤을 얻을.

    나는 비슷한 상황을 가지고 있고 내가 그것을 해결 방법은 다음과 : 내 모든 스크롤 요소는 클래스 스크롤을 얻을.

    $(document).on('wheel', '.scrollable', function(evt) {
  var offsetTop = this.scrollTop + parseInt(evt.originalEvent.deltaY, 10);
  var offsetBottom = this.scrollHeight - this.getBoundingClientRect().height - offsetTop;

  if (offsetTop < 0 || offsetBottom < 0) {
    evt.preventDefault();
  } else {
    evt.stopImmediatePropagation();
  }
});

    stopImmediatePropagation ()는 스크롤 하위 영역에서 스크롤 부모 스크롤 영역 확실하지합니다.

    여기에 바닐라 JS 구현입니다 : http://jsbin.com/lugim/2/edit?js,output

  17. 17.새로운 웹 여기 dev에. 이것은 IE와 크롬 모두 나를 위해 마법처럼 일했다.

    새로운 웹 여기 dev에. 이것은 IE와 크롬 모두 나를 위해 마법처럼 일했다.

    static preventScrollPropagation(e: HTMLElement) {
    e.onmousewheel = (ev) => {
        var preventScroll = false;
        var isScrollingDown = ev.wheelDelta < 0;
        if (isScrollingDown) {
            var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
            if (isAtBottom) {
                preventScroll = true;
            }
        } else {
            var isAtTop = e.scrollTop == 0;
            if (isAtTop) {
                preventScroll = true;
            }
        }
        if (preventScroll) {
            ev.preventDefault();
        }
    }
}

    라인의 수는 너희를 속이는하지 마십시오, 그것은 매우 간단합니다 - (? FTW 바로 자기 문서화 코드) 조금 가독성에 대한 자세한 정보

    또한 여기 언어가 타이프 것을 언급해야하지만, 언제나처럼, JS로 변환 간단합니다.

  18. 18.그 사용 Mootools의 경우, 여기에 해당하는 코드입니다 :

    그 사용 Mootools의 경우, 여기에 해당하는 코드입니다 :

                'mousewheel': function(event){
            var height = this.getSize().y;
            height -= 2;    // Not sure why I need this bodge
            if ((this.scrollTop === (this.scrollHeight - height) && event.wheel < 0) || 
                (this.scrollTop === 0 && event.wheel > 0)) {
                event.preventDefault();
            }

    = 2입니다 - 베어 나는, 몇 가지 다른 이들처럼, 높이가 무엇 픽셀의 부부에 의해 값을 조정할해야한다고 생각한다.

    기본적으로 큰 차이는 Mootools의에서, 델타 정보가 event.wheel 대신 이벤트에 전달 된 추가 매개 변수에서 오는 것입니다.

    난 아무것도에이 코드를 결합하는 경우 또한, 나는 문제가 있었다 (event.target.scrollHeight 바운드 기능이 아닌 바운드 하나 동일하지 this.scrollHeight 않는 경우)

    이 게시물에 많이 나와 도움으로이 사람을 도움이되기를 바랍니다)

  19. 19.리 랜드 Kwong의의 코드를 확인하십시오.

    리 랜드 Kwong의의 코드를 확인하십시오.

    기본 아이디어는 반환 거짓에 따라 어떤 스크롤을 방지하기 위해 선회 이벤트에 스크롤의 끝을 감지하는 기본 자바 스크립트 속성 scrollHeight와 자식 요소의 JQuery와 속성 outerHeight을 사용하면 자식 요소로 선회 이벤트를 바인딩하는 것입니다 .

    var scrollableDist,curScrollPos,wheelEvent,dY;
$('#child-element').on('wheel', function(e){
  scrollableDist = $(this)[0].scrollHeight - $(this).outerHeight();
  curScrollPos = $(this).scrollTop();
  wheelEvent = e.originalEvent;
  dY = wheelEvent.deltaY;
  if ((dY>0 && curScrollPos >= scrollableDist) ||
      (dY<0 && curScrollPos <= 0)) {
    return false;
  }
});

  20. 20.내가 선택한 라이브러리에서이 yoinked : https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee

    내가 선택한 라이브러리에서이 yoinked : https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee

    function preventParentScroll(evt) {
    var delta = evt.deltaY || -evt.wheelDelta || (evt && evt.detail)
    if (delta) {
        evt.preventDefault()
        if (evt.type ==  'DOMMouseScroll') {
            delta = delta * 40  
        }
        fakeTable.scrollTop = delta + fakeTable.scrollTop
    }
}
var el = document.getElementById('some-id')
el.addEventListener('mousewheel', preventParentScroll)
el.addEventListener('DOMMouseScroll', preventParentScroll)

    이것은 나를 위해 작동합니다.

  21. 21.Internet Explorer 용 jQuery를 플러그인을 에뮬레이트 자연 스크롤

    Internet Explorer 용 jQuery를 플러그인을 에뮬레이트 자연 스크롤

      $.fn.mousewheelStopPropagation = function(options) {
    options = $.extend({
        // defaults
        wheelstop: null // Function
        }, options);

    // Compatibilities
    var isMsIE = ('Microsoft Internet Explorer' === navigator.appName);
    var docElt = document.documentElement,
        mousewheelEventName = 'mousewheel';
    if('onmousewheel' in docElt) {
        mousewheelEventName = 'mousewheel';
    } else if('onwheel' in docElt) {
        mousewheelEventName = 'wheel';
    } else if('DOMMouseScroll' in docElt) {
        mousewheelEventName = 'DOMMouseScroll';
    }
    if(!mousewheelEventName) { return this; }

    function mousewheelPrevent(event) {
        event.preventDefault();
        event.stopPropagation();
        if('function' === typeof options.wheelstop) {
            options.wheelstop(event);
        }
    }

    return this.each(function() {
        var _this = this,
            $this = $(_this);
        $this.on(mousewheelEventName, function(event) {
            var origiEvent = event.originalEvent;
            var scrollTop = _this.scrollTop,
                scrollMax = _this.scrollHeight - $this.outerHeight(),
                delta = -origiEvent.wheelDelta;
            if(isNaN(delta)) {
                delta = origiEvent.deltaY;
            }
            var scrollUp = delta < 0;
            if((scrollUp && scrollTop <= 0) || (!scrollUp && scrollTop >= scrollMax)) {
                mousewheelPrevent(event);
            } else if(isMsIE) {
                // Fix Internet Explorer and emulate natural scrolling
                var animOpt = { duration:200, easing:'linear' };
                if(scrollUp && -delta > scrollTop) {
                    $this.stop(true).animate({ scrollTop:0 }, animOpt);
                    mousewheelPrevent(event);
                } else if(!scrollUp && delta > scrollMax - scrollTop) {
                    $this.stop(true).animate({ scrollTop:scrollMax }, animOpt);
                    mousewheelPrevent(event);
                }
            }
        });
    });
};

    https://github.com/basselin/jquery-mousewheel-stop-propagation/blob/master/mousewheelStopPropagation.js

  22. 22.내가 찾을 수있는 가장 좋은 방법은 윈도우의 스크롤 이벤트를 수신하고 자식 DIV를 볼 수 있다면 이전 scrollTop에 scrollTop을 설정했다.

    내가 찾을 수있는 가장 좋은 방법은 윈도우의 스크롤 이벤트를 수신하고 자식 DIV를 볼 수 있다면 이전 scrollTop에 scrollTop을 설정했다.

    prevScrollPos = 0
$(window).scroll (ev) ->
    if $('#mydiv').is(':visible')
        document.body.scrollTop = prevScrollPos
    else
        prevScrollPos = document.body.scrollTop

    이 스크롤 이벤트가 많이 발생하는 경우이 불통이 될 수 있도록 하위 사업부의 백그라운드에서 플리커,하지만 그것은 거의 발견되지 않고 내 사용 사례에 충분했다.

  23. 23.오버 플로우 사용하지 마십시오 : 숨겨진; 바디. 자동으로 가기 모두를 스크롤합니다. 자바 스크립트 중 하나에 대한 필요가 없습니다. 오버 플로우의 사용을 확인 : 자동 ;:

    오버 플로우 사용하지 마십시오 : 숨겨진; 바디. 자동으로 가기 모두를 스크롤합니다. 자바 스크립트 중 하나에 대한 필요가 없습니다. 오버 플로우의 사용을 확인 : 자동 ;:

    <div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

    .overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

    여기에 데모와 함께 플레이.

  24. 24.스크롤 요소를 통해 부모의 scrollTop 마우스 마우스 오버를 잠글 수있는 재미있는 트릭도 있습니다. 당신이 당신의 자신의 휠 스크롤을 구현하지 않아도 이쪽으로.

    스크롤 요소를 통해 부모의 scrollTop 마우스 마우스 오버를 잠글 수있는 재미있는 트릭도 있습니다. 당신이 당신의 자신의 휠 스크롤을 구현하지 않아도 이쪽으로.

    여기서 문서 스크롤을 방지하는 예이지만, 그것은 어떤 요소에 대해 조정될 수있다.

    scrollable.mouseenter(function ()
{
  var scroll = $(document).scrollTop();
  $(document).on('scroll.trap', function ()
  {
    if ($(document).scrollTop() != scroll) $(document).scrollTop(scroll);
  });
});

scrollable.mouseleave(function ()
{
  $(document).off('scroll.trap');
});

  25. 25.M.K. 그의 대답에 큰 플러그인을 제공했다. 플러그인은 여기에서 찾을 수 있습니다. 그러나 완성을 위해, 나는 AngularJS와 하나 대답에 함께 넣어 좋은 아이디어가 될 거라고 생각했다.

    M.K. 그의 대답에 큰 플러그인을 제공했다. 플러그인은 여기에서 찾을 수 있습니다. 그러나 완성을 위해, 나는 AngularJS와 하나 대답에 함께 넣어 좋은 아이디어가 될 거라고 생각했다.

    속성 분리-스크롤 스크롤 클래스를 포함해야하며 모든 요구 스크롤 컨테이너 클래스 또는 어떤 클래스 당신이 선택하고 잠금 클래스가 계단식해야 내부로.

  26. 26.고정 된 위치의 요소를 처리 할 때 등 reactJS, AngularJS와, VueJS 같은 현대적인 프레임 워크로,이 문제에 대한 쉬운 해결책이 있다는 것을 언급 할 가치가있다. 예로는 측면 패널 또는 중첩 요소이다.

    고정 된 위치의 요소를 처리 할 때 등 reactJS, AngularJS와, VueJS 같은 현대적인 프레임 워크로,이 문제에 대한 쉬운 해결책이 있다는 것을 언급 할 가치가있다. 예로는 측면 패널 또는 중첩 요소이다.

    이 기술은 외부, body 요소의 하단에있는 아이를 마운트하는 "포털", 실제로 그것을 추출 할 필요없이 응용 프로그램에 사용되는 구성 요소 중 하나는 당신이 그것을 사용하는 곳에서 것을 의미라고합니다 부모는 스크롤 방지하기 위해 노력하고 있습니다.

    그것은 신체 요소 자체를 스크롤 방지하지 않습니다. 당신은이 기술을 결합 할 수 있으며, 스크롤 사업부에서 응용 프로그램을 설치하면 예상 된 결과를 달성하기 위해.

    예를 포털 구현의 재료 UI 반응 : https://material-ui-next.com/api/portal/

  27. 27.ES6 크로스 브라우저 + 모바일 바닐라 JS 결정이있다 :

    ES6 크로스 브라우저 + 모바일 바닐라 JS 결정이있다 :

    function stopParentScroll(selector) {
    let last_touch;
    let MouseWheelHandler = (e, selector) => {
        let delta;
        if(e.deltaY)
            delta = e.deltaY;
        else if(e.wheelDelta)
            delta = e.wheelDelta;
        else if(e.changedTouches){
            if(!last_touch){
                last_touch = e.changedTouches[0].clientY;
            }
            else{
                if(e.changedTouches[0].clientY > last_touch){
                    delta = -1;
                }
                else{
                    delta = 1;
                }
            }
        }
        let prevent = function() {
            e.stopPropagation();
            e.preventDefault();
            e.returnValue = false;
            return false;
        };

        if(selector.scrollTop === 0 && delta < 0){
            return prevent();
        }
        else if(selector.scrollTop === (selector.scrollHeight - selector.clientHeight) && delta > 0){
            return prevent();
        }
    };

    selector.onwheel = e => {MouseWheelHandler(e, selector)}; 
    selector.onmousewheel = e => {MouseWheelHandler(e, selector)}; 
    selector.ontouchmove  = e => {MouseWheelHandler(e, selector)};
}

  28. 28.나는 Mootools의이 검색되고이 와서 그 첫번째이었다. 원래 Mootools의 예는 최대 스크롤,하지만이 일을 쓰기로했다, 그래서 아래로 스크롤하지와 함께 작동합니다.

    나는 Mootools의이 검색되고이 와서 그 첫번째이었다. 원래 Mootools의 예는 최대 스크롤,하지만이 일을 쓰기로했다, 그래서 아래로 스크롤하지와 함께 작동합니다.

    var stopScroll = function (e) {
    var scrollTo = null;
    if (e.event.type === 'mousewheel') {
        scrollTo = (e.event.wheelDelta * -1);
    } else if (e.event.type === 'DOMMouseScroll') {
        scrollTo = 40 * e.event.detail;
    }
    if (scrollTo) {
        e.preventDefault();
        this.scrollTo(0, scrollTo + this.scrollTop);
    }
    return false;
};

    용법:

    (function)($){
    window.addEvent('domready', function(){
        $$('.scrollable').addEvents({
             'mousewheel': stopScroll,
             'DOMMouseScroll': stopScroll
        });
    });
})(document.id);

  29. 29.마우스 휠 이벤트 간단한 솔루션 :

    마우스 휠 이벤트 간단한 솔루션 :

    $('.element').bind('mousewheel', function(e, d) {
    console.log(this.scrollTop,this.scrollHeight,this.offsetHeight,d);
    if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
        || (this.scrollTop === 0 && d > 0)) {
        e.preventDefault();
    }
});

  30. 30.당신은이 방법을 시도 할 수 있습니다 :

    당신은이 방법을 시도 할 수 있습니다 :

    $('#element').on('shown', function(){ 
   $('body').css('overflow-y', 'hidden');
   $('body').css('margin-left', '-17px');
});

$('#element').on('hide', function(){ 
   $('body').css('overflow-y', 'scroll');
   $('body').css('margin-left', '0px');
});

    31. from https://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element-when-inner-element-scroll-position-reaches-t by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 해제 HTML 링크에  (0) 2020.10.06
[JQUERY] 선택된 라디오 버튼의 값을 얻을 JQuery와  (0) 2020.10.06
[JQUERY] jQuery로 클리어 폼 필드  (0) 2020.10.06
[JQUERY] 속성은 요소가 있는지 확인으로 hasattr jQuery를 [중복]  (0) 2020.10.06
[JQUERY] JQuery와 부하 ()는 파이어 폭스에서 작업?  (0) 2020.10.06
,

티스토리툴바