javascript - 保持多选jquery的滚动位置

Question

我的客户不希望使用控制键来选择/取消选择多选列表中的项目。我已经想出了一个解决方案，但似乎无法在 Chrome 中保留所选项目的滚动位置。这似乎在 Firefox 中运行良好。这是怎么回事？或者如果有更好的解决方案，请提出。

$(document).ready(function () {
    $('.multi-select option').on('mousedown',function (e) {
        e.preventDefault();

        var select = $(this).parent();
        var selectTop = select.scrollTop();
                
        $(this).prop('selected', $(this).prop('selected') ? false : true);
        select.scrollTop(selectTop);

        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select title="Title" class="multi-select" style="width: 143px; height: 250px; overflow: scroll;" multiple="multiple">
        <option  value="1">1 </option>
        <option  value="2">2 </option>
        <option  value="3">3</option>
        <option  value="4">4</option>
        <option  value="5">5</option>
        <option  value="6">6</option>
        <option  value="7">7</option>
        <option  value="8">8</option>
        <option  value="9">9</option>
        <option  value="10">10</option>
        <option  value="11">11</option>
        <option  value="12">12</option>
        <option  value="13">13</option>
        <option  value="14">14</option>
        <option  value="15">15</option>
        <option  value="16">16</option>
        <option  value="17">17</option>
        <option  value="18">18</option>
        <option  value="19">19</option>
        <option  value="20">20</option>
        <option  value="21">21</option>
        <option  value="22">22</option>
        <option  value="23">23</option>
        <option  value="24">24</option>
        <option  value="25">25</option>
        <option  value="26">26</option>
        <option  value="27">27</option>
        <option  value="28">28</option>
        <option  value="31">31</option></select>

Answer 1

解决方案

$(document).ready(function () {

    var selectTop;
    var mustChangeScrollTop = false;

    $('.multi-select').on('scroll',function (e) {
        if (mustChangeScrollTop){
            $(this).scrollTop(selectTop);
             mustChangeScrollTop = false;
        }
        return true;
    });
	
    $('.multi-select option').on('mousedown',function (e) {
        e.preventDefault();

        selectTop = $(this).parent().scrollTop(); 
        $(this).prop('selected', $(this).prop('selected') ? false : true);		
        mustChangeScrollTop = true;

        return false;
    });
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select title="Title" class="multi-select" style="width: 143px; height: 250px; overflow: scroll;" multiple="multiple">
        <option  value="1">1 </option>
        <option  value="2">2 </option>
        <option  value="3">3</option>
        <option  value="4">4</option>
        <option  value="5">5</option>
        <option  value="6">6</option>
        <option  value="7">7</option>
        <option  value="8">8</option>
        <option  value="9">9</option>
        <option  value="10">10</option>
        <option  value="11">11</option>
        <option  value="12">12</option>
        <option  value="13">13</option>
        <option  value="14">14</option>
        <option  value="15">15</option>
        <option  value="16">16</option>
        <option  value="17">17</option>
        <option  value="18">18</option>
        <option  value="19">19</option>
        <option  value="20">20</option>
        <option  value="21">21</option>
        <option  value="22">22</option>
        <option  value="23">23</option>
        <option  value="24">24</option>
        <option  value="25">25</option>
        <option  value="26">26</option>
        <option  value="27">27</option>
        <option  value="28">28</option>
        <option  value="31">31</option></select>

说明

我注意到在 Chrome 中，从 mousedown 事件返回后有不必要的滚动。因此，解决方案/解决方法是添加一个 onscroll 事件并将选择区域 (selectTop) 的顶部 ($(this).scrollTop(selectTop);) 重置为这是在更改所选选项之前(selectTop = $(this).parent().scrollTop();)。 mustChangeScrollTop 变量是必需的，因为 onscroll 事件不仅在 Chrome 发生不必要的滚动时才会被调用，而且在用户手动滚动时也会被调用。因此，当不必要的滚动即将发生时(即当用户选择一个选项时)，我们将 mustChangeScrollTop 设置为 true，然后(当发生不必要的滚动时)我们通过检查它是否为 true 来理解它然后我们将其设置回 false，这样就不会干扰用户的滚动。

我在 Chrome 中测试了它，效果很好。我希望这对您有帮助。