垂直滚动在一格和水平在另一个

Question

我的网页分为两个框（divs）A在左边，B在右边。

使用浏览器窗口的主要卷轴，我想水平只滚动垂直仅和B。

与位置：固定在B是微不足道的有一个向上和向下滚动，但然后B不水平滚动。

我该怎么做？由于 AandB http://img52.imageshack.us/img52/2053/photokg.jpg

Answer 1

这个什么：http://labs.spiqr.nl/codetester/56

使用Javascript（+ 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; } 

那是你的意思？

至少应该在基于webkit和moz的浏览器中工作。

Answer 3

你必须通过JavaScript来做到这一点：
添加位置：固定和溢出：隐藏到两个div。将onScroll事件处理程序添加到页面。检查scrollTop属性，如果它没有改变 - 用户做了水平滚动，如果它有 - 垂直。然后使用滚动方法滚动你的div内的内容。
由于浏览器经常触发滚动事件，因此恐怕您无法顺利运行，但滚动速度很慢。
不要忘记那个位置：固定在IE6中不起作用。而且我并不是真的100％确定scrollby可以与overflow：hidden一起使用。