Vertical scroll in one div and horizontal in another

Question

My webpage is divided in two boxes (divs) A in the left and B in the right.

Using the main scrolls of the browser window, I want to scroll A vertically only and B horizontally only .

With position:fixed in B is trivial to have A scrolling up and down, but then B dont scroll horizontally.

How can I do this? Thanks

Answer 1

What about this: 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>

Only tested in Safari, so I can't say for sure if it will work in other browsers, although I guess it won't be a problem in Firefox.

Answer 2

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

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

Is that what you meant?

Should work in webkit and moz based browsers at the very least.

Answer 3

You'd have to do this through JavaScript:
Add position:fixed and overflow: hidden to both divs. Add onScroll event handler to the page. Check for scrollTop property, if it hasn't changed - user did horizontal scrolling, if it has - vertical. Then use scrollby method to scroll content inside your divs.
You will not be able to get it to work smoothly, I'm afraid, since scrolling event is triggered very often by the browser, but scrollby is quite slow.
Don't forget that position:fixed doesn't work in IE6. And I'm not really 100% sure that scrollby works with overflow:hidden.