当用户手指超出overflow-y时，如何结束滚动：滚动元素？
[英]How to end scroll when user finger gets outside of overflow-y:scroll element?
问题描述
I am making a vertical scrolling selector for a timer. 
我正在为计时器制作一个垂直滚动选择器。 Basically it is a bunch of lists that scroll vertically with an overflow-y: scroll and is inside of a masking element of overflow: hidden. 基本上它是一堆列表，使用overflow-y：scroll垂直滚动，并且位于overflow：hidden的掩码元素内。
jsfiddle here: https://jsfiddle.net/qdjnr8po/1/ jsfiddle： https ：//jsfiddle.net/qdjnr8po/1/
HTML: 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: 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: 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);
}
}
});
When using this on a touch device (which you can emulate by clicking and dragging), if a user touches the timer strip and drags down and their finger goes outside of the viewport, the timer continues to scroll. 在触摸设备上使用此功能（您可以通过单击并拖动来模拟），如果用户触摸计时器条并向下拖动并且他们的手指移出视口，则计时器将继续滚动。 For my use case, this is unacceptable. 对于我的用例，这是不可接受的。 How do I discontinue the scrolling event when the users finger gets outside of the box? 当用户的手指伸出盒子时，如何停止滚动事件？
I thought about checking the event coordinates and doing a prevent default if the X was outside of the correct range, but I wasn't sure that was the best way to do it. 如果X超出了正确的范围，我考虑检查事件坐标并进行防止默认，但我不确定这是最好的方法。
Edited to add working jsfiddle. 编辑添加工作jsfiddle。
1 个解决方案
解决方案1
0 已采纳 2016-08-09 18:50:53
Scroll events themselves cannot be cancelled. 滚动事件本身无法取消。 However, you CAN edit the overflow property to prevent scrolling. 但是，您可以编辑overflow属性以防止滚动。 I set my elements to overflow: hidden, then created a 'scrollable' class with the following CSS: 我将我的元素设置为overflow：hidden，然后使用以下CSS创建一个“可滚动”类：
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.scrollable was automatically applied to elements, and was also added to elements on touch end. .scrollable自动应用于元素，并且还添加到触摸端的元素。 The only time it is removed is when a user scrolls outside of the coordinates of the parent container, which effectively ended scrolling. 它被删除的唯一时间是当用户滚动到父容器的坐标之外时，这有效地结束了滚动。 This allowed it to work on my target devices (Surface:Edge, iPhone). 这使它可以在我的目标设备上工作（Surface：Edge，iPhone）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我如何使用溢出Y滚动到div中的元素 - How do I scroll to an element within a div with overflow-y
如何在溢出y div中强制滚动 - How to force scroll in overflow-y div
如何记住资产净值的滚动位置（固定/溢出-y：滚动） - How to Remember Scroll Position of a NAV (fixed/overflow-y:scroll)
溢出-y：scroll和height：100vh时如何滚动底部 - How can I scroll bottom when overflow-y:scroll and height:100vh
使用带有overflow-y的固定元素内的scrollTop：scroll - Using scrollTop inside of a fixed element with overflow-y:scroll
当我将overflow-y：hidden设置为元素时，导致滚动显示动画不触发 - When I set overflow-y:hidden to element causes scroll reveal animation to not fire
overflow-y：scroll不适用于chrome - overflow-y:scroll is not working for chrome
溢出-y：滚动导致JQuery问题 - overflow-y: scroll causing issues with JQuery
溢出-y：从容器中滚动出来 - overflow-y:scroll coming out of container
出现y滚动和jQuery溢出 - Overflow-y scroll and jquery appear
相关标签