# Horizontal scroll for a wider cell

**URL:** <https://talk.observablehq.com/t/horizontal-scroll-for-a-wider-cell/433>\
**Category:** Help\
**Created:** [March 2, 2018, 3:26pm UTC](https://talk.observablehq.com/t/horizontal-scroll-for-a-wider-cell/433 "2018-03-02T15:26:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![liuyao12](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/liuyao12/32/250_2.png) [@liuyao12](https://talk.observablehq.com/u/liuyao12)\
**Post date:** [March 2, 2018, 3:26pm UTC](https://talk.observablehq.com/t/horizontal-scroll-for-a-wider-cell/433/1 "2018-03-02T15:26:27Z")

</div>

I haven’t seen any examples where one could scroll to the right, when the contents of the visualization goes off the screen and gets cut off. I don’t know if this is a simple programming matter or is Observable’s design issue.

Here’s my notebook: [https://beta.observablehq.com/@liuyao12/descendants-of-queen-victoria](https://beta.observablehq.com/@liuyao12/descendants-of-queen-victoria)

Thank you very much! Great product, and it will surely be a huge success!

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [March 2, 2018, 4:02pm UTC](https://talk.observablehq.com/t/horizontal-scroll-for-a-wider-cell/433/2 "2018-03-02T16:02:15Z")

</div>

Hi Yao!

Sure, here’s an example of a horizontally-scrolling cell: [https://beta.observablehq.com/@tmcw/descendants-of-queen-victoria](https://beta.observablehq.com/@tmcw/descendants-of-queen-victoria)

The ingredients are:

SVG elements don’t easily support scrolling like this, so I’ve tweaked the visualization to wrap the `<svg>` element in a `<div>`, and added an `overflow-x: auto` style to that div. And then instead of returning the svg, I return the div that contains it and that provides scrolling ability.

So:

```auto
  const div = d3.select(DOM.element('div'))
    .style('overflow-x', 'auto');
  
  const svg2 = div.append('svg')
      .style("width", width)
      .style("height", height);

```

and at the end:

```auto
  return div.node();

```

(instead of directly returning the svg element)

The same pattern should work for most of the cases where you want a visualization to be able to scroll horizontally. Hope that helps!

- Tom

---

<div class="post-metadata">

**Author:** ![liuyao12](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/liuyao12/32/250_2.png) [@liuyao12](https://talk.observablehq.com/u/liuyao12)\
**Post date:** [March 2, 2018, 4:46pm UTC](https://talk.observablehq.com/t/horizontal-scroll-for-a-wider-cell/433/3 "2018-03-02T16:46:29Z")

</div>

Excellent! Glad I asked, and I hope others will find it useful too.

Thank you!