한 div의 수직 스크롤과 다른 div의 가로 스크롤

Question

내 웹 페이지는 왼쪽의 두 상자 (divs)와 오른쪽의 B 상자로 나뉩니다. 브라우저 윈도우의 주요 스크롤을 사용

는

, 나는 수평 만 상하 방향의 만와 B를 스크롤합니다.

위치 : B로 고정하면 A가 위아래로 스크롤되지만 B는 수평으로 스크롤하지 않습니다.

어떻게하면됩니까? 감사합니다 AandB http://img52.imageshack.us/img52/2053/photokg.jpg

Answer 1

이것에 대해 무엇 : http://labs.spiqr.nl/codetester/56

자바 스크립트 (+ RightJS)

document.on('ready', 
    function() 
    {  
    var scrollbarsize = 20; 

    var sizes = window.sizes(); 
    $('left').setStyle(
     { 
     height: (sizes.y - scrollbarsize) + 'px', 
     width: ((sizes.x - scrollbarsize)/2) + 'px' 
     } 
    ); 
    $$('#left > div')[0].setStyle(
     { 
     maxWidth: ((sizes.x - scrollbarsize)/2) + 'px' 
     } 
    ); 

    $('right').setStyle(
     { 
     height: (sizes.y - scrollbarsize) + 'px', 
     width: ((sizes.x - scrollbarsize)/2) + 'px' 
     } 
    ); 
    $$('#right > div')[0].setStyle(
     { 
     maxHeight: (sizes.y - scrollbarsize) + 'px', 
     } 
    ); 

    $('fakecontent').setStyle(
     { 
     width: sizes.x + 'px', 
     height: sizes.y + 'px', 
     } 
    ); 

    window.on('scroll', 
     function(e) 
     { 
     var scrolls = this.scrolls(); 

     var top = $('right').scrolls().y; 
     var left = scrolls.x/2; 
     $('right').scrollTo(left, top); 

     var left = $('left').scrolls().x; 
     var top = scrolls.y; 
     $('left').scrollTo(left, top); 
     } 
    ); 

    $$('#fakecontent')[0].setStyle(
     { 
     width: ($$('#right > div')[0].sizes().x * 2 + scrollbarsize) + 'px', 
     height: ($$('#left > div')[0].sizes().y + scrollbarsize) + 'px' 
     } 
    ); 
    } 
); 

CSS :

* { 
    margin: 0; 
    padding: 0; 
} 
#left, #right { 
    position: fixed; 
    top: 0; 
    overflow: hidden; 
} 
#left > div, #right > div { 
    padding: 5px; 
} 
#left { 
    left: 0; 
} 
#right { 
    right: 0; 
} 
#right > div { width: 800px; } 

HTML :

<div id="left"> 
    <div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, libero sed hendrerit aliquet, enim nunc blandit lectus, ut sollicitudin tortor tellus ac turpis. Vivamus nunc nunc, commodo non ultricies eu, laoreet varius ante. Fusce vel orci in ligula porttitor varius. Nulla a leo eu quam cursus tristique dictum in orci. Fusce semper nunc eget nibh sagittis sit amet sollicitudin ipsum ullamcorper. Nunc euismod dignissim odio, at scelerisque est mollis id. Morbi eros orci, rutrum eu pellentesque a, dictum sit amet leo. Nullam ac enim diam. Aenean purus sapien, pretium in posuere vulputate, ultrices ac erat. Duis euismod arcu at diam tristique pretium. Ut et lacus id metus bibendum mattis. Phasellus eleifend elit et massa vestibulum pellentesque venenatis urna luctus. 

Curabitur pharetra varius molestie. Nunc ac purus erat. Sed ultrices neque ut diam dignissim quis dignissim metus sagittis. Pellentesque condimentum rutrum mauris a molestie. In posuere nulla gravida augue pharetra eu fermentum velit vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus erat, varius sit amet fermentum nec, elementum eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tincidunt arcu. Nulla dapibus adipiscing elit nec sagittis. Proin at ligula eget orci tincidunt accumsan vel in augue. Proin gravida massa non ipsum adipiscing malesuada. Sed accumsan imperdiet turpis, at venenatis tortor mattis ac. 

Integer non enim lorem, vitae facilisis diam. Pellentesque id elementum orci. Quisque ut augue quis eros convallis tempor. Quisque placerat est quis ante laoreet commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus id risus nunc. Quisque ut tortor rutrum dui vehicula facilisis. Duis dignissim egestas risus, sit amet molestie lorem ultricies eget. Pellentesque ut nunc felis, eget malesuada lacus. Etiam arcu dui, condimentum vitae vulputate id, blandit ac nisi. Nam nec sem eget nunc tristique imperdiet a eu elit. 

Sed gravida, urna ut convallis varius, quam purus sollicitudin metus, ac tristique velit ipsum eu eros. Morbi commodo arcu in dolor bibendum vitae faucibus diam imperdiet. Nullam at laoreet erat. Quisque augue tortor, imperdiet vitae consequat ut, adipiscing ac arcu. Maecenas viverra placerat ligula a auctor. Donec pharetra sollicitudin leo. Vivamus eu ipsum nec lorem tincidunt rhoncus id sit amet nunc. Donec vel elit at elit cursus laoreet nec ut sapien. Sed pharetra pellentesque dui, ullamcorper pharetra urna pulvinar et. Etiam eget lacus at odio imperdiet facilisis quis eget ligula. 

Suspendisse semper lacinia metus, ultrices auctor augue tempus eu. Nunc sit amet ipsum urna, id ullamcorper neque. Vivamus placerat, lorem eget volutpat mollis, orci ipsum molestie erat, in laoreet tortor enim sit amet mi. Phasellus at sem ipsum, ut sodales metus. Vivamus lectus ligula, sollicitudin eu interdum vel, laoreet id odio. Vivamus non risus massa. Integer eget urna sed risus aliquet elementum. Etiam odio eros, interdum in dignissim eget, vehicula eu nisi. Duis consectetur, massa nec molestie dapibus, sem mi pretium lorem, non tristique turpis urna quis lorem. Vestibulum ipsum leo, dignissim in vestibulum a, ultricies interdum magna. Pellentesque ornare metus vel mauris ultrices dignissim. Cras volutpat felis leo, non malesuada magna. Curabitur tincidunt lobortis lorem commodo egestas. 

Nulla facilisi. Phasellus id metus quis augue dignissim luctus. In velit enim, tempus bibendum sagittis nec, vehicula sed turpis. Nam a dolor vel tortor pellentesque fermentum. Morbi adipiscing interdum eros in auctor. Maecenas in arcu eget augue sagittis suscipit iaculis vel sapien. Quisque vel quam tortor, eu ornare leo. Morbi tortor dui, pulvinar et dictum in, pretium vel felis. Integer a tortor augue. Donec vitae magna enim, ac dapibus arcu. 

Vivamus viverra, justo non euismod mattis, sapien enim posuere nibh, a elementum turpis ipsum nec urna. In ac sodales ligula. Fusce feugiat, nisl et feugiat suscipit, leo mauris vulputate turpis, at sodales tellus nibh quis nulla. Maecenas ultrices facilisis pretium. Sed pharetra felis vel urna pretium ultrices. Cras ut enim et lacus ullamcorper volutpat. Mauris scelerisque dignissim neque, vitae varius lectus convallis ac. Aenean viverra sollicitudin egestas. Integer justo nulla, cursus sed dignissim nec, feugiat in sapien. Sed dignissim varius urna sit amet pellentesque. Quisque elementum vehicula dolor, vel mattis orci vestibulum sit amet. Sed vel mauris elit, at tincidunt libero. Maecenas vel odio at purus venenatis tincidunt. Nullam at augue non risus tempus molestie id luctus urna. Mauris rutrum porta scelerisque. Donec condimentum elit sit amet urna consectetur a rhoncus tellus euismod. Vivamus mattis risus ut libero scelerisque in ultricies augue aliquet. Quisque ac quam sit amet turpis ullamcorper tempus in eu urna. Fusce id ultrices felis. Donec hendrerit mattis quam, quis hendrerit ligula volutpat a. 

Phasellus non arcu vulputate nibh mattis sodales. Integer pulvinar, nulla vel vestibulum tincidunt, diam sem viverra libero, rhoncus viverra leo massa at libero. Duis ac mauris nibh, id ornare dui. Cras volutpat venenatis libero, volutpat interdum lectus porta id. Donec volutpat, eros eu posuere faucibus, quam ipsum suscipit ligula, ut sollicitudin ipsum lorem eu odio. Fusce in velit nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas imperdiet pretium quam, nec auctor enim ornare id. Sed vel quam elit, mollis ullamcorper arcu. Vivamus sapien augue, scelerisque eu faucibus in, feugiat nec ante. Quisque egestas nisl semper est viverra ullamcorper. Quisque ante turpis, luctus sed feugiat et, accumsan a libero. Etiam id leo nulla. Phasellus diam tortor, tempus quis tristique vel, pellentesque nec arcu. Aliquam erat volutpat. Vivamus nec metus a dolor ullamcorper tempor. 

Phasellus imperdiet nibh sit amet ligula posuere dapibus. Mauris at sem turpis. Ut vel diam orci, et sodales dolor. Mauris in nibh urna, sed tincidunt magna. Nam nunc urna, fringilla quis pretium congue, vehicula sed metus. Nunc lobortis, tortor nec bibendum varius, lacus massa facilisis augue, a ultricies diam lorem id felis. Sed lacinia gravida risus, a congue ligula luctus pellentesque. Morbi purus mauris, convallis vitae pulvinar vel, volutpat in libero. Proin sit amet ante eros. Aenean posuere sem et turpis aliquet id congue neque faucibus. Fusce imperdiet volutpat eros, id varius turpis iaculis nec. 

Mauris sed nisl arcu. Aliquam dapibus nisi vel arcu ultrices vitae sodales arcu luctus. Curabitur tincidunt, ligula luctus dapibus tincidunt, felis quam vulputate leo, sed ultricies diam velit sed leo. Vivamus pretium massa et leo dignissim euismod. Nam eleifend tincidunt interdum. Maecenas congue tellus eget felis sagittis fermentum. Nullam hendrerit, eros ac auctor aliquam, velit dui commodo orci, sit amet porta ante ligula ut tortor. Cras tincidunt lectus sed metus porta ornare. Praesent ut pretium lorem. Nam a neque tortor, in fermentum mauris. Praesent eget ullamcorper justo. Curabitur fermentum imperdiet velit luctus viverra. Integer porta rhoncus pellentesque. 
    </div> 
</div> 
<div id="right"> 
    <div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, libero sed hendrerit aliquet, enim nunc blandit lectus, ut sollicitudin tortor tellus ac turpis. Vivamus nunc nunc, commodo non ultricies eu, laoreet varius ante. Fusce vel orci in ligula porttitor varius. Nulla a leo eu quam cursus tristique dictum in orci. Fusce semper nunc eget nibh sagittis sit amet sollicitudin ipsum ullamcorper. Nunc euismod dignissim odio, at scelerisque est mollis id. Morbi eros orci, rutrum eu pellentesque a, dictum sit amet leo. Nullam ac enim diam. Aenean purus sapien, pretium in posuere vulputate, ultrices ac erat. Duis euismod arcu at diam tristique pretium. Ut et lacus id metus bibendum mattis. Phasellus eleifend elit et massa vestibulum pellentesque venenatis urna luctus. 

Curabitur pharetra varius molestie. Nunc ac purus erat. Sed ultrices neque ut diam dignissim quis dignissim metus sagittis. Pellentesque condimentum rutrum mauris a molestie. In posuere nulla gravida augue pharetra eu fermentum velit vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus erat, varius sit amet fermentum nec, elementum eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tincidunt arcu. Nulla dapibus adipiscing elit nec sagittis. Proin at ligula eget orci tincidunt accumsan vel in augue. Proin gravida massa non ipsum adipiscing malesuada. Sed accumsan imperdiet turpis, at venenatis tortor mattis ac. 

Integer non enim lorem, vitae facilisis diam. Pellentesque id elementum orci. Quisque ut augue quis eros convallis tempor. Quisque placerat est quis ante laoreet commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus id risus nunc. Quisque ut tortor rutrum dui vehicula facilisis. Duis dignissim egestas risus, sit amet molestie lorem ultricies eget. Pellentesque ut nunc felis, eget malesuada lacus. Etiam arcu dui, condimentum vitae vulputate id, blandit ac nisi. Nam nec sem eget nunc tristique imperdiet a eu elit. 

Sed gravida, urna ut convallis varius, quam purus sollicitudin metus, ac tristique velit ipsum eu eros. Morbi commodo arcu in dolor bibendum vitae faucibus diam imperdiet. Nullam at laoreet erat. Quisque augue tortor, imperdiet vitae consequat ut, adipiscing ac arcu. Maecenas viverra placerat ligula a auctor. Donec pharetra sollicitudin leo. Vivamus eu ipsum nec lorem tincidunt rhoncus id sit amet nunc. Donec vel elit at elit cursus laoreet nec ut sapien. Sed pharetra pellentesque dui, ullamcorper pharetra urna pulvinar et. Etiam eget lacus at odio imperdiet facilisis quis eget ligula. 

Suspendisse semper lacinia metus, ultrices auctor augue tempus eu. Nunc sit amet ipsum urna, id ullamcorper neque. Vivamus placerat, lorem eget volutpat mollis, orci ipsum molestie erat, in laoreet tortor enim sit amet mi. Phasellus at sem ipsum, ut sodales metus. Vivamus lectus ligula, sollicitudin eu interdum vel, laoreet id odio. Vivamus non risus massa. Integer eget urna sed risus aliquet elementum. Etiam odio eros, interdum in dignissim eget, vehicula eu nisi. Duis consectetur, massa nec molestie dapibus, sem mi pretium lorem, non tristique turpis urna quis lorem. Vestibulum ipsum leo, dignissim in vestibulum a, ultricies interdum magna. Pellentesque ornare metus vel mauris ultrices dignissim. Cras volutpat felis leo, non malesuada magna. Curabitur tincidunt lobortis lorem commodo egestas. 

Nulla facilisi. Phasellus id metus quis augue dignissim luctus. In velit enim, tempus bibendum sagittis nec, vehicula sed turpis. Nam a dolor vel tortor pellentesque fermentum. Morbi adipiscing interdum eros in auctor. Maecenas in arcu eget augue sagittis suscipit iaculis vel sapien. Quisque vel quam tortor, eu ornare leo. Morbi tortor dui, pulvinar et dictum in, pretium vel felis. Integer a tortor augue. Donec vitae magna enim, ac dapibus arcu. 

Vivamus viverra, justo non euismod mattis, sapien enim posuere nibh, a elementum turpis ipsum nec urna. In ac sodales ligula. Fusce feugiat, nisl et feugiat suscipit, leo mauris vulputate turpis, at sodales tellus nibh quis nulla. Maecenas ultrices facilisis pretium. Sed pharetra felis vel urna pretium ultrices. Cras ut enim et lacus ullamcorper volutpat. Mauris scelerisque dignissim neque, vitae varius lectus convallis ac. Aenean viverra sollicitudin egestas. Integer justo nulla, cursus sed dignissim nec, feugiat in sapien. Sed dignissim varius urna sit amet pellentesque. Quisque elementum vehicula dolor, vel mattis orci vestibulum sit amet. Sed vel mauris elit, at tincidunt libero. Maecenas vel odio at purus venenatis tincidunt. Nullam at augue non risus tempus molestie id luctus urna. Mauris rutrum porta scelerisque. Donec condimentum elit sit amet urna consectetur a rhoncus tellus euismod. Vivamus mattis risus ut libero scelerisque in ultricies augue aliquet. Quisque ac quam sit amet turpis ullamcorper tempus in eu urna. Fusce id ultrices felis. Donec hendrerit mattis quam, quis hendrerit ligula volutpat a. 

Phasellus non arcu vulputate nibh mattis sodales. Integer pulvinar, nulla vel vestibulum tincidunt, diam sem viverra libero, rhoncus viverra leo massa at libero. Duis ac mauris nibh, id ornare dui. Cras volutpat venenatis libero, volutpat interdum lectus porta id. Donec volutpat, eros eu posuere faucibus, quam ipsum suscipit ligula, ut sollicitudin ipsum lorem eu odio. Fusce in velit nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas imperdiet pretium quam, nec auctor enim ornare id. Sed vel quam elit, mollis ullamcorper arcu. Vivamus sapien augue, scelerisque eu faucibus in, feugiat nec ante. Quisque egestas nisl semper est viverra ullamcorper. Quisque ante turpis, luctus sed feugiat et, accumsan a libero. Etiam id leo nulla. Phasellus diam tortor, tempus quis tristique vel, pellentesque nec arcu. Aliquam erat volutpat. Vivamus nec metus a dolor ullamcorper tempor. 

Phasellus imperdiet nibh sit amet ligula posuere dapibus. Mauris at sem turpis. Ut vel diam orci, et sodales dolor. Mauris in nibh urna, sed tincidunt magna. Nam nunc urna, fringilla quis pretium congue, vehicula sed metus. Nunc lobortis, tortor nec bibendum varius, lacus massa facilisis augue, a ultricies diam lorem id felis. Sed lacinia gravida risus, a congue ligula luctus pellentesque. Morbi purus mauris, convallis vitae pulvinar vel, volutpat in libero. Proin sit amet ante eros. Aenean posuere sem et turpis aliquet id congue neque faucibus. Fusce imperdiet volutpat eros, id varius turpis iaculis nec. 

Mauris sed nisl arcu. Aliquam dapibus nisi vel arcu ultrices vitae sodales arcu luctus. Curabitur tincidunt, ligula luctus dapibus tincidunt, felis quam vulputate leo, sed ultricies diam velit sed leo. Vivamus pretium massa et leo dignissim euismod. Nam eleifend tincidunt interdum. Maecenas congue tellus eget felis sagittis fermentum. Nullam hendrerit, eros ac auctor aliquam, velit dui commodo orci, sit amet porta ante ligula ut tortor. Cras tincidunt lectus sed metus porta ornare. Praesent ut pretium lorem. Nam a neque tortor, in fermentum mauris. Praesent eget ullamcorper justo. Curabitur fermentum imperdiet velit luctus viverra. Integer porta rhoncus pellentesque. 
    </div> 
</div> 
<div id="fakecontent"></div> 

Safari에서만 테스트되었으므로 Firefox에서 문제가되지는 않지만 다른 브라우저에서도 작동하는지 확실하게 말할 수는 없습니다.

Answer 2

div.a { overflow-y: auto; overflow-x: hidden; } 

div.b { overflow-y: hidden; overflow-x: auto; } 

당신이 무엇을 의미인가요?

적어도 웹킷과 모즈 기반 브라우저에서 작동해야합니다.

Answer 3

JavaScript를 통해이 작업을 수행해야합니다.
위치 추가 : 고정 및 오버플로 : 두 div에 모두 숨김. onScroll 이벤트 핸들러를 페이지에 추가하십시오. scrollTop 속성이 변경되지 않았 으면 확인합니다. 사용자가 가로 스크롤을했는지 확인합니다. 그런 다음 scrollby 메서드를 사용하여 div 내에서 내용을 스크롤합니다.
스크롤 이벤트가 브라우저에 의해 자주 트리거되기 때문에 원활하게 작동하지 않을 수 있지만 scrollby는 매우 느립니다.
그 위치를 잊지 말것 : 고정은 IE6에서 작동하지 않습니다. scrollby가 overflow : hidden으로 작동한다는 것은 100 % 확실하지 않습니다.