прокрутка, когда ввод фокусируется при использовании iScroll.js - PullRequest
0 голосов
/ 30 мая 2019

Я использую iscroll, версия 5.1. Я хочу, чтобы прокрутка следовала, когда фокус был на входе, как в примере ниже.

Похоже, он хорошо работает в Chrome. Однако проводник работает ненормально. Мне любопытно найти хороший обходной путь.

var myScroll;
var position;

function updatePosition() {
  position.innerHTML = this.y >> 0;
}

function loaded() {
  position = document.getElementById('position');
  myScroll = new IScroll('.iscroll', {
    probeType: 3,
    scrollbars: true,
    mouseWheel: true,
    scrollbar: true,
    deceleration: 0.000000000000001,
    mouseWheelSpeed: 100
  });
  myScroll.on('scroll', updatePosition);
  myScroll.on('scrollEnd', updatePosition);


  $('#scroller').find('input').on('focus', function(e) {
    myScroll.scrollToElement($(this).closest('input').get(0), 0);
  });
}
document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

loaded();
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -ms-touch-action: none;
}

body,
ul,
li {
  padding: 0;
  margin: 0;
  border: 0;
}

body {
  font-size: 12px;
  font-family: ubuntu, helvetica, arial;
  overflow: hidden;
  /* this is important to prevent the whole page to bounce */
}

#wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: #ccc;
  overflow: hidden;
}

#scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

#scroller ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
}

#scroller li {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #fff;
  background-color: #fafafa;
  font-size: 14px;
}

#monitor {
  position: absolute;
  left: 51%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.0/iscroll-probe.js"></script>
<div id="monitor">Y position: <strong id="position">0</strong></div>

<div id="wrapper" class="iscroll">
  <div id="scroller">
    <ul>
      <li><input type="text"></li>
      <li>Pretty row 2</li>
      <li>Pretty row 3</li>
      <li>Pretty row 4</li>
      <li>Pretty row 5</li>
      <li>Pretty row 6</li>
      <li>Pretty row 7</li>
      <li>Pretty row 8</li>
      <li>Pretty row 9</li>
      <li>Pretty row 10</li>
      <li>Pretty row 11</li>
      <li>Pretty row 12</li>
      <li>Pretty row 13</li>
      <li>Pretty row 14</li>
      <li onClick="alert('hello');">Pretty row 15</li>
      <li>Pretty row 16</li>
      <li>Pretty row 17</li>
      <li>Pretty row 18</li>
      <li>Pretty row 19</li>
      <li>Pretty row 20</li>
      <li>Pretty row 21</li>
      <li>Pretty row 22</li>
      <li>Pretty row 23</li>
      <li>Pretty row 24</li>
      <li>Pretty row 25</li>
      <li>Pretty row 26</li>
      <li>Pretty row 27</li>
      <li>Pretty row 28</li>
      <li>Pretty row 29</li>
      <li>Pretty row 30</li>
      <li>Pretty row 31</li>
      <li>Pretty row 32</li>
      <li>Pretty row 33</li>
      <li>Pretty row 34</li>
      <li>Pretty row 35</li>
      <li>Pretty row 36</li>
      <li>Pretty row 37</li>
      <li>Pretty row 38</li>
      <li>Pretty row 39</li>
      <li>Pretty row 40</li>
      <li>Pretty row 41</li>
      <li>Pretty row 42</li>
      <li>Pretty row 43</li>
      <li>Pretty row 44</li>
      <li>Pretty row 45</li>
      <li>Pretty row 46</li>
      <li>Pretty row 47</li>
      <li>Pretty row 48</li>
      <li>Pretty row 49</li>
      <li><input type="text"></li>
    </ul>
  </div>
</div>

Посмотреть на JSFiddle

...