基于jQuery的移动端列表：字母滚动条实现及子项筛选方案

嘿，我来帮你搞定这两个问题，结合你现有的jQuery Mobile代码来调整：

你现在已经能点击字母跳转到对应分组，要在长分组里筛选特定项，咱们可以结合搜索功能或者直接在点击字母后添加筛选逻辑，这里给你两种方案：

方案1：结合搜索框实时筛选当前分组 #

首先在页面header里补全搜索输入框（你已经有搜索按钮了，把它换成可输入的框）：

<div data-role="header">
  <h1>Gospel Songs </h1>
  <a href="#" id="home" data-icon="home" data-iconpos="notext"> Home</a>
  <div class="ui-input-search ui-btn-right">
    <input type="search" id="songSearch" placeholder="搜歌名...">
  </div>
</div>

然后修改点击字母的JS逻辑，滚动到分组后自动筛选符合搜索关键词的项：

$.mobile.document.on("click", "#sorter li", function() {
  var letter = $(this).text().trim();
  var divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + ")");
  
  if (divider.length > 0) {
    // 先滚动到对应分组标题
    var top = divider.offset().top;
    $.mobile.silentScroll(top);
    
    // 获取搜索框的关键词
    var keyword = $("#songSearch").val().trim();
    // 先隐藏所有非分组标题的列表项
    $("#sortedList li:not(.ui-li-divider)").hide();
    
    if (keyword) {
      // 只显示当前分组里包含关键词的项
      divider.nextUntil(".ui-li-divider").filter(function() {
        return $(this).text().toLowerCase().includes(keyword.toLowerCase());
      }).show();
    } else {
      // 没关键词就显示当前分组所有项
      divider.nextUntil(".ui-li-divider").show();
    }
  } else {
    return false;
  }
});

方案2：固定筛选条件（比如只显示包含特定词的项） #

如果不需要搜索框，直接在点击字母时筛选固定条件的项，比如只显示R分组里带"Rock"的歌曲：

$.mobile.document.on("click", "#sorter li", function() {
  var letter = $(this).text().trim();
  var divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + ")");
  
  if (divider.length > 0) {
    $.mobile.silentScroll(divider.offset().top);
    
    // 筛选当前分组中包含"Rock"的项
    $("#sortedList li:not(.ui-li-divider)").hide();
    divider.nextUntil(".ui-li-divider").filter(function() {
      return $(this).text().includes("Rock");
    }).show();
  }
});

你现有的滚动条功能已经能用，但可以简化逻辑+优化样式，让它更贴合移动端体验：

1. 优化滚动条CSS样式 #

给滚动条加个更原生的移动端样式：

#sorter {
  position: fixed;
  right: 8px;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 6px 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#sorter ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sorter li {
  text-align: center;
  padding: 3px 5px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  line-height: 1.2;
}
#sorter li.ui-btn {
  background: #E76C67;
  color: white;
  border-radius: 50%;
}

2. 简化滚动条位置计算逻辑 #

把你原来复杂的条件判断简化，逻辑更清晰：

$(function() {
  const header = $(".ui-page-active [data-role='header']");
  const footer = $(".ui-page-active [data-role='footer']");
  let headerHeight = header.outerHeight();
  let footerHeight = footer.outerHeight();
  let windowHeight = $(window).height();

  // 滚动时调整滚动条位置和高度
  $.mobile.window.on("scroll", function() {
    const scrollTop = $(this).scrollTop();
    // 可用高度 = 窗口高度 - 头部高度 - 底部遮挡高度
    let availableHeight = windowHeight - headerHeight - 16;
    
    // 当滚动到接近底部时，缩短滚动条高度
    if (scrollTop + windowHeight >= footer.offset().top) {
      const bottomCovered = scrollTop + windowHeight - footer.offset().top;
      availableHeight = windowHeight - headerHeight - bottomCovered - 16;
    }

    $("#sorter").css({
      "top": `${headerHeight + 12}px`,
      "height": `${availableHeight}px`
    });
  });

  // 窗口大小变化时重新计算
  $.mobile.window.on("throttledresize", function() {
    windowHeight = $(window).height();
    headerHeight = header.outerHeight();
    footerHeight = footer.outerHeight();
    $("#sorter").height(windowHeight - headerHeight - 20).css("top", `${headerHeight + 12}px`);
  });
});

另外记得补全你没写完的字母列表：

<div id="sorter">
  <ul data-role="listview">
    <li><span>A</span></li>
    <li><span>B</span></li>
    <li><span>C</span></li>
    <li><span>D</span></li>
    <li><span>E</span></li>
    <li><span>F</span></li>
    <li><span>G</span></li>
    <li><span>H</span></li>
    <li><span>I</span></li>
    <li><span>J</span></li>
    <li><span>K</span></li>
    <li><span>L</span></li>
    <li><span>M</span></li>
    <li><span>N</span></li>
    <li><span>O</span></li>
    <li><span>P</span></li>
    <li><span>Q</span></li>
    <li><span>R</span></li>
    <li><span>S</span></li>
    <li><span>T</span></li>
    <li><span>U</span></li>
    <li><span>V</span></li>
    <li><span>W</span></li>
    <li><span>X</span></li>
    <li><span>Y</span></li>
    <li><span>Z</span></li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者user9306264