Forcing Visible Scrollbar (PGR)

Hi there, this was an adventure to investigate, but I was able to find a custom scroll bar implementation that is able to display on both iPhone and android mobile devices. iPhones have not supported custom scroll bars since ios14 so it needs to be created with JS. I tried a bunch of different JS libraries, but the one that I was able to actually get to work decently is a jQuery plugin called SlimScroll. Honorable mention to LetMeScroll which looked and scrolled nice but I was having trouble clicking on the actual survey questions. If anyone else that stumbles on this has a smoother implementation for iPhones within Qualtrics, I would be interested to hear.
To implement SlimScroll in Qualtrics, first head over to the survey's Look & Feel and add the below to the survey's Header:

 
Then, in the Style section, add the below CSS, customizing as needed
.scrollable { 
margin: 0 auto;
overflow: hidden;
padding-right: 15px;
}

.slimScrollBar {
display: block !important;
width: 15px !important; 
background-color: red !important;
}
Next, head over to the survey builder and create a survey question that would require scrolling. I used a Multiple Choice question with 20 options in my example. Finally, replace the question's JavaSctipt with the below. I grabbed code from this codepen and added pieces for height and for destroying the custom scrollbar on page submit so it doesn't carry to the following page.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

document.getElementById("Page").classList.add("scrollable");

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var availheight = jQuery(window).height();
var height = availheight - 1;
var scrollable = jQuery('.scrollable');
  
 // Keeping the Scrollable state separate
 var state = {
  pos: {
   lowest: 0,
   current: 0
  },
  offset: {
   top: [0, 0], //Old Offset, New Offset
  }
 }
 //
 scrollable.slimScroll({
  height: height,
  width: '100%',
  start: 'top'
 });
 //
 scrollable.slimScroll().bind('slimscrolling', function (e, pos) {
  // Update the Scroll Position and Offset
   
  // Highest Position
  state.pos.highest = pos !== state.pos.highest ?
   pos > state.pos.highest ? pos : state.pos.highest
  : state.pos.highest;
   
  // Update Offset State
  state.offset.top.push(pos - state.pos.lowest);
  state.offset.top.shift();
   
 });


});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Qualtrics.SurveyEngine.addOnPageSubmit(function()
{

jQuery('.scrollable').slimScroll({destroy: true});

});
This works pretty well on mobile for questions that do not require dragging and dropping as the touch movements needed for that sort of conflict with SlimScroll, so I'd recommend not using it for PGR. However, the respondent has to scroll to the bottom of the page to proceed in the survey, so at least there is no way for them to avoid seeing that there is a longer list. A purely CSS solution that did work on Android but not iPhone can be found here, which might be worth checking out. I added the implementation to the other post.