当用户手指超出溢出-y：滚动元素时如何结束滚动？

Question

我正在为计时器制作一个垂直滚动选择器。基本上，它是一堆列表，它们垂直滚动并带有一个 overflow-y: scroll 并且位于 overflow: hidden 的掩码元素内。

jsfiddle 在这里：https://jsfiddle.net/qdjnr8po/1/

HTML：

<div class="viewport-mask">
    <div class="number-viewport">
        <ul class="minutes-top">
            <li class="first-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
            <li class="second-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>

        </ul>
        <ul class="minutes-1">
            <li class="first-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
            <li class="second-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
        </ul>
        <ul class="minutes-2">
            <li class="first-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
            <li class="second-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
        </ul>
        <ul class="minutes-3">
            <li class="first-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
            <li class="second-copy">
                <ul>
                    <li>00</li>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li>29</li>
                    <li>30</li>
                    <li>31</li>
                    <li>32</li>
                    <li>33</li>
                    <li>34</li>
                    <li>35</li>
                    <li>36</li>
                    <li>37</li>
                    <li>38</li>
                    <li>39</li>
                    <li>40</li>
                    <li>41</li>
                    <li>42</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                    <li>46</li>
                    <li>47</li>
                    <li>48</li>
                    <li>49</li>
                    <li>50</li>
                    <li>51</li>
                    <li>52</li>
                    <li>53</li>
                    <li>54</li>
                    <li>55</li>
                    <li>56</li>
                    <li>57</li>
                    <li>58</li>
                    <li>59</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS：

    li li { 
        list-style-type: none; 
        border: 0; margin: 0; padding: 0;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    ul {
        border: 0; padding: 0; margin: 0;
        list-style-type: none;
    }
    ul ul {
        width: 40px;
    }
    .viewport-mask {
        width: 30px;
        overflow: hidden;
        border: 1px solid black;
    }
    .number-viewport {
        height: 90px;
        width: 45px;
        overflow: scroll;
        overflow-x: hidden;
        position: relative;
    }
    .minutes-1, .minutes-2, .minutes-3 {
        position: absolute;
        height: 30px;
        z-index: 10;
        top: 0;
        left: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        color: #999;
        font-size: 16px;
        background-color: white;
    }
    .minutes-2 {
        height: 60px;
        z-index: 8;
        color: #333;
        font-size: 22px;
    }
    .minutes-3 {
        height: 90px;
        z-index: 6;
    }

    .minutes-top {
        z-index: 20;
        height: 90px;
        overflow: scroll;
        overflow-x: hidden;
        width: 50px;
        padding-left: 49px;
        position: absolute;
        top: 0;
        left: 0;
    }

JS：

    $(document).ready(function(){
        var timeoutId = null;
        var $controlList = $('.minutes-top');
        $controlList.on('scroll', function(e){
            $('.minutes-1, .minutes-2, .minutes-3').scrollTop( $(this).scrollTop() );
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function(){
                var scroll = $controlList.scrollTop();
                if ( $controlList.scrollTop() % 30 !== 0) {
                    $controlList.scrollTop( roundToNearest30( $controlList.scrollTop() ) );
                }
                if (scroll > 2700) {
                    $controlList.animate( {scrollTop: (scroll - 1800)}, 0 );
                } else if ( scroll < 900) {
                    $controlList.animate( {scrollTop: (scroll + 1800)}, 0 );
                }
            }, 80);
        });

        $('.minutes-top').scrollTop(30 * 60);

        var roundToNearest30 = function(val){
            var newVal = val % 30;
            if(newVal < 15 ) {
                return val - newVal;
            } else {
                return val + (30 - newVal);
            }
        }
    });

在触摸设备（您可以通过单击和拖动来模拟）上使用此功能时，如果用户触摸计时器条并向下拖动并且他们的手指离开视口，则计时器会继续滚动。对于我的用例，这是不可接受的。当用户的手指离开盒子时，如何停止滚动事件？

我考虑过检查事件坐标并在 X 超出正确范围时执行默认设置，但我不确定这是不是最好的方法。

编辑添加工作 jsfiddle。

Answer 1

滚动事件本身无法取消。但是，您可以编辑溢出属性以防止滚动。我将元素设置为溢出：隐藏，然后使用以下 CSS 创建了一个“可滚动”类：

.scrollable {
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
}

.scrollable 被自动应用到元素上，并且在触摸端也被添加到元素上。唯一一次删除它是当用户滚动到父容器的坐标之外时，这实际上结束了滚动。这让它可以在我的目标设备（Surface:Edge、iPhone）上运行。