다른 div가 스크롤되지 않은 경우 div 스크롤

달성하고자하는 것을 보여주기 위해 jsFiddle을 설정했습니다.다른 div가 스크롤되지 않은 경우 div 스크롤

<body>은 부모 창 크기로 두 개 이상있을 수 있지만 간단한 설정입니다. 따라서 <body>은 스크롤하지 않습니다.

아무런 div이 스크롤되지 않고 (아무 것도 스크롤되지 않으면) .mainContent이 스크롤되도록 이벤트 리스너를 window.scroll에 바인드하려고합니다.

예를 들어 .sidebar으로 스크롤하는 경우 사이드 바를 스크롤하면됩니다. 그러나 내 커서가 오른쪽 가장자리에 있고 마우스 휠로 스크롤하면 .mainContent이 몸체가 넘쳐 나는 것처럼 스크롤해야합니다.

잘 설명합니까?

내 질문은 그럴 경우 .mainContent을 스크롤 할 수 있도록 마우스 휠을 돌릴 때 다른 요소가 스크롤되지 않는지 감지하는 방법입니다.

출처

2014-03-06 CBeTJlu4ok

두 div가 마우스 휠에서 스크롤되기를 원합니 까? – Zword

좋아요 말해봐 내가이 권한을 가지고 있다면 커서가있는 div 만 있으면 스크롤 할 수 없겠지? –

아니요, 하나만 있습니다. 때로는 사이드 바가 스크롤 할 수 없으며 때로는 사이드 바가 스크롤됩니다. 사이드 바를 스크롤 할 수있을 때 사이드 바를 스크롤하지만 사이드 바를 스크롤하면 사이드 바를 스크롤하여 .mainContent를 스크롤합니다. – CBeTJlu4ok

Check this fiddle .Works 대부분의 브라우저에서 :

//Swap values of the below two variables if needed 
var scrollDiv1=$('.mainContent'), 
    scrollDiv2=$('.sidebar'); 

var s=0; 
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; 
$(window).bind(mousewheelevt, function(e){ 
    if(s==0) 
    { 
    var evt = window.event || e; 
    evt = evt.originalEvent ? evt.originalEvent : evt;    
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; 
    if(delta > 0) { 
     scrollDiv1.stop() 
     .animate({scrollTop :scrollDiv1.scrollTop()-100},'linear'); 
    } 
    else{ 
     scrollDiv1.stop() 
     .animate({scrollTop :scrollDiv1.scrollTop()+100},'linear'); 
    } 
    } 
    s=0; 
}); 

scrollDiv2.bind(mousewheelevt, function(e){ 
    s=1; 
});

이 wheel 변화 변수를 포함하려면 (마우스 wheelevt) 값 :

var mousewheelevt = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers 
      document.onmousewheel !== undefined ? "mousewheel" : // Webkit + IE 
      "DOMMouseScroll"; // Remaining (Previous firefox versions)

출처

2014-03-06 20:18:10 Zword

나는 네임 스페이스를 사용하여 나중에이 이벤트를 언 바인드한다 :'$ (window) .bind ('mousewheel.content', function (e) {})'. 그래서'var mousewheelevt = "onwheel"in document.createElement ("div")? "wheel": document.onmousewheel! == undefined? "mousewheel": "DOMMouseScroll"; mousewhelelevt = mousewhelelevt + '.content''가 올바르게 작동합니까? – CBeTJlu4ok

이 시도 :

$(window).bind('mousewheel', function (event) { 
    var isHover = $('.mainContent').is(':hover'); 

    if (!isHover) { 
     $('.sidebar').scrollTop($('.sidebar').scrollTop() - event.originalEvent.wheelDeltaY); 
    } 
});

이

http://jsfiddle.net/bradleytrager/qPjs8/

출처

2014-03-06 19:16:39

글쎄요, 정확히 그 것이지만,이 솔루션은 처음부터 몸체 오버 플로우를 없애 버렸기 때문에 무언가를 가지고 있습니다. 스크롤 요소를 스크롤 할 때이 요소가 스크롤을 멈추었을 때 다른 요소가 스크롤되는 것을 원하지 않습니다. 또한 이것은 단지 내가 스크롤을 썼을 때 (다른 div 스크롤도) 이상한 행동을합니다. – CBeTJlu4ok

@ Mpa4Hu는 당신이 찾고있는 것과 다릅니다 : http://jsfiddle.net/X3Ej8/2/ ??? –

@ A.Wolff는이 크로스 브라우저 솔루션입니까? 답변으로 제출할 수 있습니까? – CBeTJlu4ok

답변 해 주셔서 감사합니다. 유감스럽게도 스크롤 영역 하나에서만 문제가 해결 되었기 때문에 대답이 충분하지 않았습니다. 그러나 .sidebar은 스크롤 할 수있을뿐만 아니라 모달과 같은 것들이있을 수 있습니다. 우리는 @A.Wolf가 제안한대로 클래스 .scrollable으로 다시 만들 수는 있지만 여전히 제 경우에는 더 나은 해결책이 있다고 생각합니다.

답장을 보내 주셔서 감사 드리며, 이것이 내가 정말로 필요로하고 내 문제가 실제로 무엇인지 생각하는 데 도움이되었습니다.

$(window).bind('mousewheel', function (event) { 
    if($(event.target).is('body')) { 
     $('.mainContent').scrollTop($('.mainContent').scrollTop() - event.originalEvent.wheelDeltaY); 
    } 
});

이 기본 기능이다는 물론 누군가가 이것을 사용하기로 결정하면, 당신은이 크로스 브라우저를 확인해야합니다. @Zword는

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; 
$(window).bind(mousewheelevt, function(e){

을 제안하지만 라이트 전에, 나는 파이어 폭스 DOMMouseScroll is not stable too. Wheel 이벤트가 대신 사용할 수 있습니다 제안하기 때문에 좀 더 연구하고자한다.

출처

2014-03-07 11:49:14 CBeTJlu4ok

다른 div가 스크롤되지 않은 경우 div 스크롤

답변

관련 문제