Auto-scroll container for Pick, Group, and Rank question | XM Community
Skip to main content

Hi all. I’m using a Pick, Group, and Rank question type to create a one-item survey that asks users to drag 10 choices from a list of 37 to the selection container.

Because the list of 37 choices extends past the selection container, respondents would need to click on a choice, hold, and use their mouse scroll wheel to get back to the top of the page. What I would much prefer is for the selection container to scroll as a respondent scrolls down the page, so it is always visible.

I’ve seen a few other folks ask this but no good solutions provided. Hoping someone out there knows how I might be able to achieve this using custom code?

Thanks in advance!

 

 

Hi ​@suburbanbeat, default scroll behavior can be pretty frustrating for respondents.

What you’re looking for can be done with some simple custom CSS and a little JavaScript. Add this to the question’s JavaScript editor (gear icon → Add JavaScript):

Qualtrics.SurveyEngine.addOnload(function() {
  // Wait for DOM to fully load
  setTimeout(function() {
    const container = document.querySelector('.PGRContainerRight'); // This is the group/selection box

    if (container) {
      container.style.position = 'sticky';
      container.style.top = '20px'; // Adjust as needed
      container.style.zIndex = '1000';
      container.style.backgroundColor = '#fff'; // Optional: prevent overlap
    }
  }, 500);
});

 

This should make the “Click to write Group 1” box sticky — so as the user scrolls down the long list of 37 items, the selection container will stay visible on the right side of the screen.

 

Let me know if it works.

-- Rochak

Leave a Reply


Terms & Conditions