垂直居中的下拉列表_WEB前端在线测试

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>垂直居中的下拉列表</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="http://codepen.io/assets/reset/normalize.css">

<style>
  a, input, button {
  -ms-touch-action: none !important;
}

html {
  font-size: 62.5%;
  overflow: none;
}

body {
  font: normal 1.6rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: gray;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

.scrollable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.box {
  position: relative;
  width: 80%;
  height: 80%;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  background: white;
}

.fill {
  height: 4000px;
}

.click {
  padding: 1rem;
  border-top: 1px solid #ddd;
  background: #eee;
  color: #999;
  text-align: center;
  font-weight: bold;
}
.click:first-child {
  border-top: none;
}
.click:active {
  background: #ddd;
}

.expand {
  height: 300px;
  border-top: 1px solid #ddd;
}

</style>

<script>
    window.console = window.console || function(t) {};
    window.open = function(){ console.log('window.open is disabled.'); };
    window.print = function(){ console.log('window.print is disabled.'); };
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }
  </script>

<script src="//assets.codepen.io/assets/libs/prefixfree.min-de773054e90c52a3c2631c944681b64e.js">"></script>

<script src="//assets.codepen.io/assets/libs/modernizr-0e41cf622f0788eca25945c37bdc5b15.js">"></script>

</head>

<body>

<div class="box scrollable"><div class="click">1</div><div class="expand"></div><div class="click">2</div><div class="expand"></div><div class="click">3</div><div class="expand"></div><div class="click">4</div><div class="expand"></div><div class="click">5</div><div class="expand"></div><div class="click">6</div><div class="expand"></div><div class="click">7</div><div class="expand"></div><div class="click">8</div><div class="expand"></div><div class="click">9</div><div class="expand"></div><div class="click">10</div><div class="expand"></div><div class="click">11</div><div class="expand"></div><div class="click">12</div><div class="expand"></div><div class="click">13</div><div class="expand"></div><div class="click">14</div><div class="expand"></div><div class="click">15</div><div class="expand"></div><div class="click">16</div><div class="expand"></div><div class="click">17</div><div class="expand"></div><div class="click">18</div><div class="expand"></div><div class="click">19</div><div class="expand"></div><div class="click">20</div><div class="expand"></div></div>

<script src='//assets.codepen.io/assets/libs/fullpage/jquery-c152c51c4dda93382a3ae51e8a5ea45d.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js'></script>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>

<script>
    $(function () {
    FastClick.attach(document.body);
});
$('.expand').hide();
$('.click').on('click', function () {
    $(this).next('.expand').toggle();
});
if (navigator.userAgent.match(/(iPhone|iPad|iPod)/g)) {
    console.log('here');
    $(document).on('touchmove.scrollable', function (e) {
        e.preventDefault();
    });
    $('body').on('touchstart.scrollable', '.scrollable', function (e) {
        var t = e.currentTarget;
        if (t.scrollTop === 0) {
            t.scrollTop = 1;
        } else if (t.scrollHeight === t.scrollTop + t.offsetHeight) {
            t.scrollTop -= 1;
        }
        if ($(this).css('overflow') === 'auto' && t.scrollHeight > t.offsetHeight) {
            $('body').on('touchmove.scrollable', '.scrollable', function (e) {
                e.stopPropagation();
            });
        } else {
            $('body').off('touchmove.scrollable');
        }
    });
}
    //@ sourceURL=pen.js
  </script>

</body>
</html>