Search code examples
scrollreveal.jsquarto

How to make a horizontal scrollable in Quarto?


I was wondering if it is possible to add a horizontal scrollable in revealjs presentations in Quarto? The following code makes it possible to scroll vertically in a slide:

---
title: "How to horizontally scrollable"
format: revealjs
---

## Slide Title {.scrollable}

- Some text
- Some more text 
- Some text
- Some more text 
- Some text
- Some more text 
- Some text
- Some more text 
- Some text
- Some more text 

Output:

enter image description here

So I was wondering if anyone knows if it is possible to add a horizontal scrollable in Quarto?


Solution

  • All you need is just some css code.

    ---
    title: "How to horizontally scrollable"
    format: revealjs
    css: hscroll.css
    ---
    
    ## Slide Title {.hscroll .scrollable}
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor mauris, mattis non nunc nec, luctus aliquet magna. In tortor ante, aliquam eget felis eu, consectetur congue enim. Pellentesque pellentesque tincidunt lectus quis lacinia. Aliquam dolor sem, aliquet vitae aliquam eget, vehicula ac augue. Pellentesque molestie quam et commodo dignissim. Suspendisse potenti. Sed pellentesque metus non turpis condimentum molestie. Nullam accumsan urna nec luctus rutrum. Nunc dapibus auctor convallis. Praesent ac felis fermentum, venenatis elit vel, venenatis mi. Fusce non tellus risus. Phasellus elementum erat sit amet urna venenatis maximus. Nunc vehicula pretium scelerisque.
    
    
    - Some text
    - Some more text
    - Some text
    - Some more text
    - Some text
    - Some more text
    - Some text
    - Some more text
    - Some text
    - Some more text
    

    hscroll.css

    .hscroll {
      overflow: auto;
      white-space: nowrap;
    }
    

    both horizontal and verticall scrolling