从容器中删除垂直滚动

Question

我不知道为什么，但如果我从容器中删除overflow:hidden，它会继续显示一页中的所有步骤。如果我允许溢出y，它会像iframe一样在其自身上创建一个垂直滚动条，但我从未创建过iframe。 我认为错误在于cont类CSS。

＆＃13;

＆＃13;

function step_process(from, to, dir) {
  if (typeof(dir) === 'undefined') dir = 'asc';
  var old_move = '';
  var new_start = '';

  var speed = 500;

  if (dir == 'asc') {
    old_move = '-';
    new_start = '';
  } else if (dir == 'desc') {
    old_move = '';
    new_start = '-';
  }

  $('#block' + from).animate({
    left: old_move + '100%'
  }, speed, function() {
    $(this).css({
      left: '100%',
      'background-color': 'transparent',
      'z-index': '2'
    });
  });
  $('#block' + to).css({
    'z-index': '3',
    left: new_start + '100%'
  }).animate({
    left: '0%'
  }, speed, function() {
    $(this).css({
      'z-index': '2'
    });
  });

  if (Math.abs(from - to) === 1) {
    // Next Step
    if (from < to) $("#step" + from).addClass('complete').removeClass('current');
    else $("#step" + from).removeClass('complete').removeClass('current');
    var width = (parseInt(to) - 1) * 20;
    $(".progress_bar").find('.current_steps').animate({
      'width': width + '%'
    }, speed, function() {
      $("#step" + to).removeClass('complete').addClass('current');
    });
  } else {
    // Move to Step
    var steps = Math.abs(from - to);
    var step_speed = speed / steps;
    if (from < to) {
      move_to_step(from, to, 'asc', step_speed);
    } else {
      move_to_step(from, to, 'desc', step_speed);
    }
  }
}

function move_to_step(step, end, dir, step_speed) {
  if (dir == 'asc') {
    $("#step" + step).addClass('complete').removeClass('current');
    var width = (parseInt(step + 1) - 1) * 20;
    $(".progress_bar").find('.current_steps').animate({
      'width': width + '%'
    }, step_speed, function() {
      $("#step" + (step + 1)).removeClass('complete').addClass('current');
      if (step + 1 < end) move_to_step((step + 1), end, dir, step_speed);
    });
  } else {
    $("#step" + step).removeClass('complete').removeClass('current');
    var width = (parseInt(step - 1) - 1) * 20;
    $(".progress_bar").find('.current_steps').animate({
      'width': width + '%'
    }, step_speed, function() {
      $("#step" + (step - 1)).removeClass('complete').addClass('current');
      if (step - 1 > end) move_to_step((step - 1), end, dir, step_speed);
    });
  }
}

$(document).ready(function() {
  $("body").on("click", ".progress_bar .step.complete", function() {
    var from = $(this).parent().find('.current').data('step');
    var to = $(this).data('step');
    var dir = "desc";
    if (from < to) dir = "asc";

    step_process(from, to, dir);
  });
});

$(function() {
  $(document).ready(function() {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $("#country_state"); //Fields wrapper
    var add_button = $("#add_cs"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
      e.preventDefault();
      if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $(wrapper).append(' <div class="input-field col s5"><select id="country' + x + '" name="country" class="country"> <option value="" disabled selected>Select Country</option></select> <label>Please let us know your university sub branches</label></div><div class="input-field col s5"> <select id="state' + x + '" name="state" class="state"> <option value="">Select State</option></select></div>');

        populateCountries("country" + x + "", "state" + x + "");

      }
    });

  });

});

＆＃13;

.cont {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  margin-top: -80px;
}
.clear {
  clear: both;
}
.progress_bar {
  max-width: 820px;
  width: 60%;
  margin: 115px auto 0;
  position: relative;
  height: 45px;
  z-index: 10;
}
.progress_bar hr.all_steps {
  width: 60%;
  height: 7px;
  border: none;
  background: #DDDDDD;
  border-bottom: 1px solid #fff;
  position: absolute;
  bottom: 10px;
  left: 10%;
  z-index: 1;
}
.progress_bar hr.current_steps {
  width: 0%;
  border: 0;
  height: 5px;
  background: #ea463d;
  position: absolute;
  bottom: 12px;
  left: 10%;
  z-index: 3;
}
.progress_bar div.step {
  float: left;
  width: 20%;
  height: 50px;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  position: relative;
  text-shadow: 1px 1px #fff;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.progress_bar div.step:before {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 20px;
  border: 2px solid transparent;
  background: #ea463d;
  bottom: 14px;
  left: 50%;
  margin-left: -6px;
  content: '';
  z-index: 4;
  display: none;
}
.progress_bar div.step:after {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 20px;
  border: 2px solid #DDDDDD;
  background: #DDDDDD;
  bottom: 12px;
  left: 50%;
  margin-left: -8px;
  content: '';
  z-index: 2;
}
.progress_bar div.step.current {
  color: #222;
}
.progress_bar div.step.current:before {
  display: block;
}
.progress_bar div.step.complete {
  color: #888;
  cursor: pointer;
}
.progress_bar div.step.complete:before {
  display: block;
}
.progress_bar div.step.complete:hover {
  color: #555;
}
#blocks {
  width: 100%;
  position: relative;
  height: 300px;
  margin-top: 50px;
}
#blocks .block {
  position: absolute;
  width: 100%;
  left: 100%;
  height: 200px;
}
#blocks .block .wrap {
  width: 60%;
  margin: 0 auto;
}
/* CSS BUTTON By http://codepen.io/daneden/pen/rcFJE*/

.butt {
  /* Additions */
  cursor: pointer;
  margin-right: 5px;
  /* End Additions */
  font-size: .825em;
  text-decoration: none;
  font-weight: 700;
  padding: .35em 1em;
  background-color: #eaeef1;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  border-radius: 3px;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.7);
}
.butt:hover,
.butt.hover {
  background-color: #fff;
}
.butt:active,
.butt.active {
  background-color: #d0d3d6;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.2);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">

  <div class="progress_bar">
    <hr class="all_steps">
    <hr class="current_steps">
    <div class="step current" id="step1" data-step="1">
      Step 1
    </div>
    <div class="step" id="step2" data-step="2">
      Step 2
    </div>
    <div class="step" id="step3" data-step="3">
      Step 3
    </div>
    <div class="step" id="step4" data-step="4">
      Step 4
      <form class="col s12 formValidate" id="formValidate" method="post" name="regForm">
        <div class="row">
          <div class="input-field col s12">
            <input id="full_name" type="text" length="150" name="user_name" data-error=".errorTxt1">

          </div>
        </div>

        <br />
        <a onclick="step_process(1, 2)" class="butt">Next</a>
    </div>
  </div>
  <div class="block" id="block2">
    <div class="wrap">
      <div class="row">

        <div class="input-field col s12">
          >
          <label>Please let us know your main university branch*</label>
          <div class="errorTxt6 right"></div>
        </div>
        <div class="input-field col s5">
          <select name="state" id="state" class="state">
            <option value="">Select State</option>
          </select>

        </div>

        <div class="input-field col s2 right">
          <div class="tooltip">
            <a class="btn-floating btn-large waves-effect waves-light red" id="add_cs"><i class="material-icons">add</i></a><span class="tooltiptext">Click to add sub branches</span>
          </div>
        </div>
      </div>

      <div class="row">

        <div class="input-field col s12">
          <select name="course" data-error=".errorTxt7" multiple>
            <option value="" disabled selected>Choose your course</option>
            <option value="1">Arts</option>
            <option value="2">Science</option>
            <option value="3">Commerce</option>
          </select>
          <label>What courses does your university offer*</label>

        </div>

      </div>

      <br />

    </div>
  </div>

  </form>
  <br />

</div>
</div>

</div>

</div>

＆＃13;

＆＃13;

＆＃13;