代码之家 › 专栏 › 技术社区 › user869375

维护多选jquery的滚动位置

jquery javascript

user869375 · 技术社区 · 6 年前

我的客户端不希望使用控制键来选择/取消选择多选列表中的项。我已经提出了一个解决方案,但似乎无法保持滚动的位置,选定的项目在铬。在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>

1 回复 | 直到 6 年前

Thanasis1101 6 年前

解决方案

$(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事件并重置( $(this).scrollTop(selectTop); )选定区域的顶部( selectTop )更改所选选项之前的状态( selectTop = $(this).parent().scrollTop(); mustChangeScrollTop 变量是必需的,因为onscroll事件不仅在Chrome中出现不必要的滚动时调用,而且在用户手动滚动时调用。所以当不必要的滚动即将发生时(也就是当用户选择一个选项时),我们设置对于true,然后(当不必要的滚动出现时),我们通过检查它是否为true来理解它,然后将其设置回false,这样就不会影响用户的滚动。