ScrollView subclass does not scroll


I’ve got a ScrollView subclass I want to use to show some long text. It looks like this:

{ScrollView} = require 'atom'

module.exports =
  class ClojureDocView extends ScrollView
    @content: ->
      @div class: 'clojuredoc', =>
        @pre =>
          @code class: 'output'

    addLine: (line) ->

Now when I add a whole bunch of stuff using addLine, the text just runs off the bottom edge without scrolling. Any ideas why?

Hiding a subview
"Manually" format text
How to scrollToCursorPosition in bottomPanel for a TextEditor
Hiding a subview
Background image rendering

Just a wild guess, but maybe you need to call the parent.


You mean calling super in my constructor? Doesn’t seem to have any effect.


Looks like you’re not initializing the view.

Check this package as example


Thanks for the suggestion! That didn’t in fact fix it but at least now I know of a working example to look at :slight_smile:


The actual problem was just not applying overflow: auto to my top level container element.


Thanks! This thread saved me hours of frustration.


Been having similar issues here, decided to bump instead of creating a new thread:

I’ve been attempting to implement a ScrollView subclass in my code and I can’t figure out for the life of me why it isn’t scrolling. Code:

{ScrollView} = require 'atom'

fs = require 'fs'

module.exports =
  class PlasmidEditorView extends ScrollView

    @content: ->
      # fix lack of scrolling behavior
      @div class: "block", overflow: "auto", =>
        @div class: 'text-highlight', id: "textPara",  "TEXT"
        @span class: 'loading loading-spinner-large', id: "SPINNER"
        @button click: "insertText", "insert text"

    constructor: (@bpe) ->

    insertText: (event, element) ->
      document.getElementById("textPara").innerHTML =

On click, the text is inserted, but no scrolling is available. I’ve tried it both with and without the class: "block" or the overflow: "auto", and neither appears to work. I’ve also tried {ScrollView} = require 'atom-space-pen-views with the same effect. I’ve looked at markdown-preview and this seems to call the same functions, so I’m really not sure where to start looking.


The problem I’ve been having is that the div didn’t take focus and therefore the cursor keys didn’t do anything. I fixed that by adding tabindex: -1 to the list of attributes of the top-level div. I have no idea if it helps you but it just takes a minute to test it.


Hm. Didn’t seem to have an effect. I added in a TextEditorView instead of a div to hold text and once the texteditorview got too big for the page due to inserting text, I still wasn’t able to scroll down.


Managed to get a scrolling view that I’m pretty happy with by literally making a markdown-preview div:

{ScrollView, TextEditorView} = require 'atom-space-pen-views'
fs = require 'fs'

module.exports =
class PlasmidEditorView extends ScrollView
  @content: ->
    @div class: "markdown-preview", tabindex: -1, =>
      @div id: "hey", "hello"
      @subview id: "editTextOne", new TextEditorView

I’ve been perusing markdown-preview.less from the markdown-preview package and adding bits and pieces, but haven’t been able to isolate what exactly makes it scrollable. Still, if anyone’s looking (and doesn’t mind having their page get a white background), this will work.


Hm. I’ve tried your github project, but there you’ve got an iframe that’s marked scrolling="no" and overflow-y: hidden. But I have to confess that fiddling with that didn’t help :frowning:

Hm. So I played around a little more, and what I’ve found out is that I could add style="overflow: scroll;" to the div with the id plasmidDisplayBase, and that did the trick.

Does that help? Here is the result:

<div class="block" id="plasmidDisplayBase" callattachhooks="true" style="overflow: scroll;">
    <iframe class="inline-block" src="file:///CENSORED/red-october/lib/raphael-display.html"
        id="pageFrame" width="1000" height="1000" scrolling="yes" seamless="seamless"
        style="overflow-y: scroll;overflow-x: scroll;" frameborder="0">


I just figured that out myself, haha. Awesome, thanks so much!