Add mouse scroll to view in atom package


#1

**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?
#2

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.


#3
'use babel';

export default class PackageView {

constructor(serializedState) {

// Create root element
  this.element = document.createElement('div');
  this.element.classList.add('test-package');

  // Create main message element
  const message = document.createElement('div');
  message.classList.add('main');
  this.element.appendChild(message);

  // create project view header
  const header = document.createElement('div');
  header.classList.add('header');
  message.appendChild(header);

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

  // footer view
  const footer = document.createElement('div');
  footer.classList.add('footer');
  message.appendChild(footer);

      // extraDetails
      const extra = document.createElement('div');
      extra.classList.add('extra-detail');
      extra.innerHTML = "<hr><h1>Extras : </h1>";
      footer.appendChild(extra);
 }

// Tear down any state and detach
destroy() {
  this.element.remove();
  //this.subscriptions.dispose();
}

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'];
}

#4

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


#5

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


#6

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.


#7

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

https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css


#8

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 .


#9

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.