My company is responsible for developing a vertical scrolling list of donors to a shrine, that will scroll via mouse click and drag. The list will be displayed on a touch screen interface, so that visitors can just drag the list up and down to view the names. We have the list created, however, we are unsure of how we can make it " scrollable ".

Comments

qherzog’s picture

https://donors.mariasteinshrine.org/preservationfund

The list will scroll behind the image

John Pitcairn’s picture

It's being set in the theme. What a weird thing to have done.

base.css specifies:

html {
overflow-y: hidden;
}

and

body {
overflow-y: hidden;
}

Then in main.css that specific node is set as fixed:

#node-14231 {
  position: fixed;
}

Disabling those 3 rules in Chrome inspector allows the page to scroll, so if you comment the overflow and position rules out in the theme, or override them to overflow-y: auto; and position: static; in a later stylesheet, your page will scroll normally.

You shouldn't need any additional modules or code, just fix the existing css.

VM’s picture

We have the list created

How is the list being generated? A list of nodes via views?
 

Typically scrolling occurs in a browser when there is more to display than the screen will hold. Else there is no reason to scroll. 

qherzog’s picture

Im not entirely sure, this page was built 10+ years ago so everything about it is just horrid. The list is a view composed of content. Each donor is added content, that then displays, and believe me when I say the list is massive. If you zoom out your browser, you can see it better

VM’s picture

https://www.drupal.org/project/views_infinite_scroll is an option however, something is wrong with that page that it doesn't already allow a scroll by the browser (which is what handles scrolling). I suggest reviewing exactly how the page was built and if needed rebuild it to determine why the browser isn't being triggered to provide scrollbars.