하나의 div와 하나의 div를 동시에 스크롤하십시오.

필자는 수직으로 두 개의 열 (각 화면 절반)으로 분할 된 사이트를 만들었습니다. 아래로 스크롤하면 사이트의 어떤 위치에 커서를 놓고 왼쪽 열이 정상적으로 작동하고 아래로 스크롤해야하며 오른쪽 열이 반대 방향으로 스크롤해야합니다.하나의 div와 하나의 div를 동시에 스크롤하십시오.

나는이 질문 (Modify scroll direction)을 보러 왔는데, 그 해결책을 얻으려고했지만, 제대로 작동하지 못했습니다.

이

내가 뭘하려 : http://jsbin.com/UJEBohu/1/edit

출처

2013-10-29 Pandorrra

내가 대답을하려고하기 전에 CSS를 알고 있습니까? 자바 스크립트? jquery? ur jsbin은 그다지 의미가없는 것처럼 보입니다. (오버플로 : 스크롤에 대해서는 어떻습니까?) –

HTML과 CSS에 대해 알고 있지만 자바 스크립트와 jquery에는 익숙하지 않습니다. 그렇습니다. 내 jsbin은 실제로 좋지 않을 수 있습니다. . – Pandorrra

내가 여기 작업 솔루션을했습니다 : http://jsfiddle.net/QDUyR/1/

은 <body> onload 이벤트에 넣고 당신은 설정해야합니다 :)

// Add event listener for scrolling 
$("#left").on("scroll", function() { 
    var scrolledleft = parseInt($("#left").scrollTop()) * -1; 
    console.log(scrolledleft + scrolledright) 
    $("#right").scrollTop(scrolledleft + scrolledright) 
}) 

//Move right column to bottom initially 
$("#right").scrollTop($("#right").height()) 
//Get actual distance scrolled 
var scrolledright = parseInt($("#right").scrollTop())

편집 : 동등한만큼 div의 높이에 상관없이 작동하도록 업데이트되었습니다.

출처

2013-10-29 20:12:52 aanders77

다른 브라우저는 모두 스크롤 할 때마다 다른 양으로 모두 스크롤됩니다.

여기 내 업데이트 fiddle입니다. 아직 사파리에서 시도하지 않았습니다. 한 번 스크롤 할 때마다 Mozilla의 스크롤 이벤트가 여러 번 발생하기 때문에 마우스 휠에서 바인드를 사용하고 있습니다.

먼저 어떤 브라우저를 사용하고 있는지 확인하고 해당 브라우저에 대한 각 스크롤의 양을 설정합니다. 그런 다음 각 브라우저에서 스크롤 할 양을 기준으로 올바른 div를 얼마나 많이 이동 시킬지 계산합니다.

마우스 휠 이벤트에서 올바른 div가 화면 아래 또는 상단으로 이동하지 않는지 확인합니다.

저는 event.originalEvent.detail을 사용하여 마우스 휠이 mozilla에서 어떤 방향으로 가고 있는지 알려주고 IE와 Chrome에서는 event.originalEvent.wheelDelta를 사용하고 있습니다.

다음은 코드입니다.

$(function() 
{ 
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) 
    { 
     //Firefox 
     var eachScroll = 114; 
    } 
    else if (navigator.userAgent.indexOf('Chrome') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Chrome') + 7).split(' ')[0]) >= 15) 
    { 
     //Chrome 
     var eachScroll = 100; 
    } 
    else if(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Version') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Version') + 8).split(' ')[0]) >= 5) 
    { 
     //Safari 
    } 
    else 
    { 
     //IE 
     var eachScroll = 94; 
    } 

      var windowHeight = $(window).height(); 
      var containerHeight = $("#container").height(); 
      var heightLeftover = containerHeight - windowHeight; // Actual amount left to scroll 
      var totalScrolls = heightLeftover/eachScroll; // Total number of scrolls 
      totalScrolls = Math.ceil(totalScrolls); // Always round up 
      var amountToScroll = ($("#right").height() - containerHeight)/totalScrolls; 
      // Amount that right div will move every time we scroll 

      $(window).bind("mousewheel DOMMouseScroll", function(event){ 
      var top = $("#right").position().top; 

       if(event.originalEvent.wheelDelta) // Check if wheelDelta exists 
       { 
       if(event.originalEvent.wheelDelta == - 120) 
       { 
        if(top < 2) 
        $("#right").css({top: top + amountToScroll}); 
       } 
       else 
       { 
        if(top > -2000) 
         $("#right").css({top: top - amountToScroll}); 
       } 
      } 
      else if(event.originalEvent.detail) // check if detail exists 
      { 
       if(event.originalEvent.detail == 3) 
       { 
        if(top < 2) 
        $("#right").css({top: top + amountToScroll}); 
       } 
       else 
       { 
        if(top > -2000) 
        $("#right").css({top: top - amountToScroll}); 
       } 
      } 
      }); 
     });

출처

2013-10-29 20:45:15 Matt

예, 제가 찾고있는 방향입니다. 유일한 문제는 스크롤하는 페이지의 끝에 도달하면 Chrome 및 Safari에서 왼쪽의 div가 중지되지만 오른쪽의 div는 계속 스크롤하는 것입니다. 어떻게 내가 올바른 것을 멈추게 할 수 있습니까? – Pandorrra

크롬, IE 및 모질라에서 시험해 보았고 바닥에서 멈 춥니 다. 당신은 당신이 가지고있는 것의 또 다른 바이올린이나 빈을 게시 할 수 있습니까? 나는 그것을 일으키는 것을 발견 할 수 있다면 보게 될 것입니다. – Matt

이것은 내가 시도한 것입니다 : http://jsbin.com/OcEMuTu/1/ – Pandorrra

하나의 div와 하나의 div를 동시에 스크롤하십시오.

답변

관련 문제