Add mouse scroll to view in atom package


**I am using ES6 to develop an atom package, I had created a view in it but it does not have mouse scroll. Can anyone suggest me to how to do that? **

How can we help you write packages?

What is your view exactly? It can be a lot of things. What are you trying to scroll in that view? Is it about styling (e.g. overflow behaviour) or coding functionality (e.g. scrollIntoView()) for it? Please provide a code snippet of what you’re working on and try describing the exact problem and what you’re trying to achieve.

'use babel';

export default class PackageView {

constructor(serializedState) {

// Create root element
  this.element = document.createElement('div');

  // Create main message element
  const message = document.createElement('div');

  // create project view header
  const header = document.createElement('div');

    // title
    const title = document.createElement('span');
    title.innerHTML = "<hr><h1>Title : </h1>";
    // details
    const description = document.createElement('span');
    description.innerHTML = "<h1>Description : </h1>";
    // behaviour
    const behaviour = document.createElement('div');
    behavioul.innerHTML = "<h1>Behaviour </h1>";

  // footer view
  const footer = document.createElement('div');

      // extraDetails
      const extra = document.createElement('div');
      extra.innerHTML = "<hr><h1>Extras : </h1>";

// Tear down any state and detach
destroy() {

getTitle() {
  // Used by Atom for tab text
  return 'Package Result';

getURI() {
  // Used by Atom to identify the view when toggling.
  return 'atom://test-package';

getDefaultLocation() {
  // This location will be used if the user hasn't overridden it by dragging the item elsewhere.
  // Valid values are "left", "right", "bottom", and "center" (the default).
  return 'right';

getAllowedLocations() {
  // The locations into which the item can be moved.
  return ['left', 'right', 'bottom'];


This is the view I created. the content will be added dynamically at run time. But the view is not vertically scrolling. So how to add the scrolling functionality to this view


Is there a style-sheet for you package? You probably just need to set height & overflow for the view.


yes there is a style sheet for the package. I’m new to atom packages. Can you describe how to set overflow to this view.


This isn’t anything specific to Atom. You use the same techniques that you would for an element in a web page. For example:


thanks it worked fine for the scroll bar on the view.
can you suggest a way to scroll the same view on up and down keys of keyboard .


I don’t know for sure, but I suspect that it’s the same way you do it in a browser window. There should be some function that scrolls up and down, and you want to make that into a couple of commands and bind them to up and down.