javascript - 在一个 div 中垂直滚动，在另一个 div 中水平滚动

Question

我的网页分为两个框 (divs)，左边是 A，右边是 B。

使用浏览器窗口的主滚动条，我想只垂直滚动A，只水平滚动B。

在 B 中使用 position:fixed 让 A 上下滚动很简单，但 B 不会水平滚动。

我该怎么做？谢谢

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 中不会有问题。