Auto-scroll container for Pick, Group, and Rank question

Question

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!

rochak_khandelwal · Answer

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 makethe “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

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded