问当拖动可拖项目/向上拖动页面时，页面不会垂直滚动

EN

/**
 * Fix for iOS bug with scroll height when using 100vh/fixed elements.
 */
 
const documentHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--doc-height', '${window.innerHeight}px')
}
window.addEventListener('resize', documentHeight)
documentHeight()




/**
 * jQUery UI tabs
 */

$(function() {
    $('#tabs').tabs();
});




/*------------------------------------*\
    #QUIZZES
\*------------------------------------*/

/**
 * Drag & Drop Quiz.
 *
 * 1. Make words draggable with revert = true.
 */
 
$(document).ready(function() {
    score = 0;
    if ($('.draggable')[0]) {
        $('.draggable').draggable({
            revert: true /* [1] */,
            snapTolerance: 30,
            revertDuration: 0,
            cursor: 'move',
            create: function(event, ui) {
                $(event.target).css('width', Math.ceil($(event.target).width()) + 1 + 'px');
            },
            zIndex: 100,
        });
    }
});

/**
 * Make blank spaces accept corresponding word.
 */

$('.blank').each(function(index) {
    toAccept = $(this)[0].getAttribute('data-accept'); //Compatible for lower IE
    // Resize spans to correct answer
    if ($(this).hasClass('resizable')) {
        answer = $('.draggable.' + toAccept);
        width = answer[0].scrollWidth;
        width =
            width -
            $(this)
                .css('padding-left')
                .replace('px', '') *
                2;
        $(this).css('width', width);
    }

    $(this).droppable({
        accept: '.' + toAccept,
        drop: function(event, ui) {
            $(this).append(ui.draggable);
            $(this).addClass('answered');

            score++;
            $(ui.draggable).draggable('destroy');
            $(this).droppable('destroy');
        },
    });
});

/**
 * Multiple Choice Quiz (radio button based).
 */

function checkMultiChoiceAnswer() {
    score = 0;
    qs = 0;
    $('input[value="true"]').each(function() {
        qs++;
    });
    $('input').each(function(ind, ele, arr) {
        if (ele.value == 'true' && ele.checked === true) {
            score++;
        }
    });
    // console.log(score);
    $('.quiz__correct').text(score.toString());
    $('.quiz__total').text(qs.toString());
}

function multiReset() {
    qs = 0;
    $('.checked').each(function(ind, ele, arr) {
        $(ele).removeClass('checked');
    });
    $('input').each(function(ind, ele, arr) {
        ele.checked = false;
    });
    $('input[value="true"]').each(function() {
        qs++;
    });
    $('.quiz__total').text(qs);
    $('.quiz__correct').text('0');
}

/**
 * Data Entry Quiz (input based).
 */

function checkAnswersCashFlow() {
    score = 0;
    $('.answerable').each(function(index, element, array) {
        givenAns = $(element)[0].value.replace('/[^0-9]/g', '');
        givenAns = givenAns.toLowerCase();

        ans = $(element)[0]
            .getAttribute('data-accept')
            .replace('/[^0-9]/g', '');
        if (givenAns == ans) {
            score++;
        }
        $('.quiz__correct').text(score);
    });
}

function tableReset() {
    $('.quiz__correct').text('0');
    $('.answerable').val('');
}

/**
 * Sets Quiz score to 0/X on page load and on reset. This works on the "Multiple
 * Choice Quiz" and also the "Data Entry Quiz".
 */

window.onload = function() {
    if (typeof $('.quiz__total')[0] != 'undefined') {
        qs = 0;
        $('input[value="true"]').each(function() {
            qs++;
        });
        $('.quiz__total').text(qs);
    }
    if (typeof $('.answerable')[0] != 'undefined') {
        total = 0;
        $('.answerable').each(function(ind, ele, arr) {
            total++;
        });
        $('.quiz__total').text(total);
    }
};

/* Base */
html {
  background: white;
  font-size: 62.5%;
  height: 100%;
  height: var(--doc-height);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f7f7f7;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background: skyblue;
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  min-height: 100%;
  min-height: var(--doc-height);
  letter-spacing: 1px;
  line-height: 1.6em;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* Page Layout */
.page {
  padding: 72px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-head {
  background-color: white;
  box-shadow: inset 0 -4px 0 #f7f7f7, 0 4px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  height: 72px;
  padding: 0 12px;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}

.page-foot {
  background-color: white;
  box-sizing: border-box;
  box-shadow: inset 0 4px 0 #f7f7f7, 0 -4px 0 rgba(0, 0, 0, 0.08);
  height: 72px;
  padding: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

/* Main Container */
.main {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 0 0;
  position: relative;
  width: 100%;
  max-width: 1024px;
  z-index: 10;
}
.main:before, .main:after {
  content: "";
  display: flex;
  flex-shrink: 0;
  position: sticky;
  background: red;
  background-size: 100%;
  height: 370px;
  top: 64px;
  margin-left: -112px;
  width: 112px;
}
.main:after {
  margin-left: auto;
  margin-right: -112px;
}

.main__inner {
  box-sizing: border-box;
  display: block;
  padding: 0 12px;
  width: 100%;
}

/* Content Group */
.wrap {
  background: white;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.08), 4px 4px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  border-radius: 12px;
  margin: 0 auto 24px;
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Boxout */
.boxout {
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 24px 24px 0;
  position: relative;
}

/* Quiz */
.missing-words {
  position: relative;
}

.missing-words__answers {
  background: white;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 24px 24px 12px;
  transform: translateZ(0);
}

.missing-words__answers-item {
  background: none;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  margin: 0 4px 8px 0;
  padding: 0;
  transition: 0.24s ease-in;
  vertical-align: top;
}

.missing-words__draggable {
  background: skyblue;
  border-radius: 24px;
  color: black;
  cursor: -webkit-grab;
  cursor: grab;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 8px 16px;
  position: relative;
  white-space: nowrap;
}

.missing-word__list {
  border-radius: 4px;
  overflow: hidden;
  padding-left: 0;
}

.missing-words__list li {
  background: white;
  margin-bottom: 2px;
  padding: 24px 24px 15px;
}

.missing-words__blank {
  background: #f7f7f7;
  outline: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 24px;
  box-shadow: inset 2px 2px 0 #f7f7f7;
  box-sizing: border-box;
  display: inline-block;
  min-height: 32px;
  letter-spacing: 1px;
  margin: 8px 2px !important;
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 4px);
}

/* Table */
.table-overflow {
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}

th,
td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

tbody th,
tbody td {
  background: #f7f7f7;
}

/* Tabs */
.ui-tabs {
  margin: 0 0var --spacing-24;
  position: relative;
  text-shadow: none;
  width: 100%;
  overflow: hidden;
}

.ui-tabs-nav {
  font-weight: 700;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.ui-tabs-nav li {
  background: none;
  display: inline-block;
  margin: 0;
  padding-left: 0;
  position: relative;
  width: auto;
}

.ui-tabs-nav a {
  background: skyblue;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-size: 1.4rem;
  height: 48px;
  line-height: 48px;
  outline: none;
  padding: 0 12px;
  transition: none;
  min-width: 48px;
}

.ui-tabs-nav .ui-state-active a {
  background: #f7f7f7;
}

.ui-tabs-panel {
  background: #f7f7f7;
  border-radius: 0 0 12px 12px;
  clear: both;
  display: block;
  margin: 0 0 24px;
  padding: 24px 24px 0;
  position: relative;
}

<div class="page">
  <div class="page-head">Fixed Header</div>
  <div class="main">
    <div class="main__inner">
      <div class="wrap">

        <div class="boxout">
            <h2>Quiz</h2>
          <p>Drag the correct words from the list below to complete the following sentences:</p>
          <div class="missing-words">
            <ul class="missing-words__answers">
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-1">Closed</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-2">Characteristics</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-3">Loyalty</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-4">Observations</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-5">Sales</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-6">Primary</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-7">Profiles</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-8">Competitors</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-9">Quantitative</span></li>
              <li class="missing-words__answers-item"><span class="missing-words__draggable draggable word-10">Same</span></li>
            </ul>
            <ul class="missing-words__list">
              <li>In order to understand target customers, a business may create customer <span class="missing-words__blank blank resizable" data-accept="word-7"></span> – this involves grouping customers together based on sets of shared <span class="missing-words__blank blank resizable" data-accept="word-2"></span> .</li>
              <li>Identifying and marketing to target customers is the most effective way for a business to maximise <span class="missing-words__blank blank resizable" data-accept="word-5"></span> . Targeting customers effectively also helps a business to build customer <span class="missing-words__blank blank resizable" data-accept="word-3"></span> .</li>
              <li><span class="missing-words__blank blank resizable" data-accept="word-8"></span> are other businesses that offer the <span class="missing-words__blank blank resizable" data-accept="word-10"></span> or similar products/services.</li>
              <li>Questionnaires, focus groups and <span class="missing-words__blank blank resizable" data-accept="word-4"></span> are all examples of <span class="missing-words__blank blank resizable" data-accept="word-6"></span> research methods.</li>
              <li><span class="missing-words__blank blank resizable" data-accept="word-9"></span> data relates to amounts or quantities and can be easily counted and measured. It can be collected through the use of <span class="missing-words__blank blank resizable" data-accept="word-1"></span> questions.</li>
            </ul>
          </div>
        </div>

        <div class="table-overflow">
          <table class="table-solid">
            <thead>
              <tr>
                <th style="width: 33.33333%;">&nbsp;</th>
                <th style="width: 33.33333%;">Primary research</th>
                <th style="width: 33.33333%;">Secondary research</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Definition:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
              <tr>
                <th>Examples:</th>
                <td><textarea></textarea></td>
                <td><textarea></textarea></td>
              </tr>
            </tbody>
          </table>
          <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
            <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
              <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#tab-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Ikea</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#tab-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Nike</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tab-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Microsoft</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="#tab-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Tesla</a></li>
              <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#tab-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Starbucks</a></li>
            </ul>
            <div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
              <h2>Ikea</h2>
              <p>Ikea’s mission statement is:</p>
              <blockquote>
                <p>To offer a wide range of well-designed, functional home furnishing products at prices so low, that as many people as possible will be able to afford them.</p>
              </blockquote>
            </div>
            <div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Nike</h2>
              <p>Nike’s mission statement is:</p>
              <blockquote>
                <p>To bring inspiration and innovation to every athlete in the world – if you have a body, you are an athlete.</p>
              </blockquote>
            </div>
            <div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Microsoft</h2>
              <p>Microsoft’s mission statement is:</p>
              <blockquote>
                <p>To empower every person and every organisation on the planet to achieve more.</p>
              </blockquote>
            </div>
            <div id="tab-4" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Tesla</h2>
              <p>Tesla’s mission statement is:</p>
              <blockquote>
                <p>To accelerate the world’s transition to sustainable energy.</p>
              </blockquote>
            </div>
            <div id="tab-5" aria-labelledby="ui-id-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
              <h2>Starbucks</h2>
              <p>Starbucks’ mission statement is:</p>
              <blockquote>
                <p>To inspire and nurture the human spirit – one person, one cup and one neighbourhood at a time.</p>
              </blockquote>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="page-foot">Fixed Footer</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>