Vertical scrollbar for long functions with knitr slides

Question

Is it possible to make vertical scrollbar for long functions with knitr slides (using xaringan custom style)? I was trying some options based on this previous question How to make vertical scrollbar appear in RMarkdown code chunks (html view) but no idea how to do it only for long functions (which height goes out of the frame). Any advice is more than welcome.

---
title: "title"
subtitle: "subtitle"
author: "author"
date: "2017"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "style.css"]
    nature:
      highlightStyle: zenburn
      highlightLines: true
      countIncrementalSlides: false
---

```{r , echo=FALSE, include=FALSE}
library(knitr)
opts_chunk$set(fig.align='center', message=TRUE, error=TRUE, warning=TRUE, tidy=TRUE, comment = "##", echo = TRUE, dev='svg')
options(width=65)
```

```{r}
fu <- function(x){
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
}
```

Answer 1

I'm not an expert with CSS so can't guarantee that this is a robust solution, but adding max-height and overflow-y to the styling of code blocks seems to work well. Adjust the max-height as necessary, 200px is fairly short and only used to demonstrate how it works:

<style>
pre.sourceCode {
    max-height: 200px;
    overflow-y: auto;
}
</style>

I'm not sure if the class name for code blocks changes with different output formats, I was using slidy_presentation as I didn't have your renderer installed so you may have to check the class on your output.

Answer 2

In your style.css, create a class that define y overflow as scroll and the desired height of the div (see this SO answer as a reference)

.pre {
  height: 10pc;
  overflow-y: scroll;
}

Then apply that css class to the code block:

.pre[
```{r}
fu <- function(x){
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
}
```
]

Answer 3

Have you tried the solution from this answer

.scrollable-slide {
    height: 800px;
    overflow-y: auto !important;
}