Preview code in action, pasted from JS console here: http://staticresource.com/backpack-overflow.mp4

backpack-filter-shadows.js

// jsincss
function jsincss(a,b,e){function f(c,a,b,e){return c.addEventListener(a,function(a){var d=document.querySelector("#jsincss-"+b);d||(d=document.createElement("style"),d.id="jsincss-"+b,document.head.appendChild(d));var c=d.textContent;a=e(a);d=c&&a===c?void 0:d.textContent=a;return d})}a=a||function(){return""};b=b||window;e=e||["load","resize","input","click","reprocess"];var g=Date.now()+Math.floor(100*Math.random());return b===window?e.forEach(function(c){return f(window,c,g,a)}):Array.prototype.slice.call(document.querySelectorAll(b)).forEach(function(c){return e.forEach(function(b){return f(c,b,g,a)})})};

// overflow(selector, 'top'|'right'|'bottom'|'left'|[], '[--self] {}')
function overflow(c,b,f){var d=(c+b).replace(/\W/g,""),g={top:function(a){return 0<a.scrollTop},right:function(a){return a.scrollLeft+a.offsetWidth<a.scrollWidth},bottom:function(a){return a.scrollTop+a.offsetHeight<a.scrollHeight},left:function(a){return 0<a.scrollLeft}};return Array.prototype.slice.call(document.querySelectorAll(c)).reduce(function(a,e,c){b=Array.isArray(b)?b:[b];b.every(function(a){return g[a](e)})?(e.setAttribute("data-overflow-"+d,c),a+=f.replace(/\[--self\]/g,"[data-overflow-"+d+'="'+c+'"]')):e.setAttribute("data-overflow-"+d,"");return a},"")};

// Scrolling element triggers 'reprocess' event
var list = document.querySelector('#narrow-by-list')

;['scroll', 'click'].forEach(function(evt) {
  list.addEventListener(evt, function() {
    var reprocess = document.createEvent('Event')
    reprocess.initEvent('reprocess', true, true)
    window.dispatchEvent(reprocess)
  })  
})

// Add shadow elements to list container
;['top-shadow', 'bottom-shadow'].forEach(function(name) {
  var tag = document.createElement('div')
  tag.className = name
  list.insertAdjacentElement('afterend', tag)
})

document.head.appendChild(document.createElement('style')).textContent = `
  .block-layered-nav.popup::after {
    display: none;
  }
  .close-icon {
    background: transparent !important;
  }
  [id="narrow-by-list"] li {
    margin-right: 0px;
  }
  [id="narrow-by-list"] ~ .top-shadow,
  [id="narrow-by-list"] ~ .bottom-shadow {
    display: block;
    width: 100%;
    height: 1.5em;
    position: absolute;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: .5s ease-in-out;
  }
  [id="narrow-by-list"] ~ .top-shadow {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
  }
  [id="narrow-by-list"] ~ .bottom-shadow {
    bottom: 80px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  }
`

// JS-powered overflow styles
jsincss(function() {
  return [
    overflow(
      '#narrow-by-list',
      'top',
      '[--self] ~ .top-shadow { opacity: 1; }'
    ),
    overflow(
      '#narrow-by-list',
      'bottom',
      '[--self] ~ .bottom-shadow { opacity: 1; }'
    )
  ].join('\n')
})