javascript - 存在溢出但滚动不适应它

Question

我正在为某人开发一个网站，但我选择的模板有问题，并且在移动设备上包含一个非常笨拙的 jscrollpane。我删除了 jscrollpane，但主要内容仍然存在于 jmpress slider 中。当移动设备的媒体查询处于事件状态时，内容会溢出但 body 的滚动条不会针对它进行调整:

我不确定是什么原因造成的。 jmpress slider wrapper 的高度固定为 475px，但当它发生变化时，即使设置为绝对高度，定位也会发生显着变化。如何引入滚动到内容底部的功能？

可以找到或多或少的功能版本here .部分代码如下:

@import url('normalize.css');
@import url("http://fonts.googleapis.com/css?family=Oswald:300,400,700");
@import url("http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,latin-ext,cyrillic");

/* =============================================================================
1. General 
============================================================================= */

body {
  font-family: 'PT Sans', Arial, Helvetica, sans-serif;
  background-color: #FFF;
  background-image: url(../images/body_backrounds/body_bg_1.png);
  font-weight: 400;
  font-size: 14px;
  color: #666665;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  overflow: auto;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #E67068;
}
.container > header {
  margin: 0px 0px 10px 0px;
  padding: 20px 0px 10px 0px;
  position: relative;
  display: block;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
}
/* ============================================================================= 
2. Content Changer 
============================================================================= */

.jms-slideshow {
  position: relative;
  width: 100%;
  height: 470px;
}
.jms-wrapper {
  width: 100%;
  height: 100%;
  outline: none;
  -webkit-appearance: none;
}
.step {
  width: 960px;
  height: 470px;
  display: block;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
.step:not(.active) {
  opacity: 0;
  filter: alpha(opacity=0);
  /* internet explorer */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  /*IE8*/
}
#jms-content,
#jms-content2,
#jms-content3,
#jms-content4,
#jms-content5 {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 470px;
  overflow: ;
  outline: none;
  -webkit-appearance: none;
}
/** NOT SUPPORTED STYLES **/

.not-supported .jms-slideshow {
  position: absolute;
  width: 100%;
  height: 100%;
}
.not-supported .step {
  position: relative;
  opacity: 1;
  margin: 20px auto;
}
.not-supported .jms-wrapper {
  width: 100%;
  height: 100%;
  outline: none;
  -webkit-appearance: none;
}
/* ============================================================================= 
3. Main Menu 
============================================================================= */

nav select {
  display: none;
  /* this is just for the mobile display */
}
#menu {
  margin-bottom: 30px;
}
nav ul {
  display: block;
  list-style-type: none;
  margin: 0 auto;
  text-align: center;
  width: 50%;
  padding: 0;
  -webkit-transition: all .25s ease-in;
  -moz-transition: all .25s ease-in;
  -o-transition: all .25s ease-in;
  transition: all .25s ease-in;
}
nav li {
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
  float: left;
  display: inline;
  margin: 0;
  text-align: center;
  width: 25%;
  padding: 0;
}
nav li:hover {
  border-top: 2px solid #cfd0ca;
  border-bottom: 2px solid #cfd0ca;
}
nav li.active {
  border-top: 2px solid #E67068;
  border-bottom: 2px solid #E67068;
}
nav a {
  display: block;
  height: 100%;
  padding: 1em 0;
  text-decoration: none;
  color: #999;
  letter-spacing: 1px;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-shadow: none;
}
nav a:hover a {
  color: #E67068;
}
#nav .active a {
  color: #292929;
  outline: 0;
}
nav a,
nav li {
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
/* ============================================================================= 
4. Mobile Dropdown Menu
 ============================================================================= */

#dd_menu {
  display: none;
  width: 100%;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  padding: 7px;
  margin: 0 0 0 0;
  outline: none;
}
/* ============================================================================= 
5. Blocks 
============================================================================= */

.block {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #E67068;
  padding: 20px 20px 20px 20px;
  bottom: 30px;
  border-radius: 30px 30px 30px 30px;
}
/* Block for Portfolio Tab */

.block2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #E67068;
  padding: 0px 0px 0px 0px;
  bottom: 30px;
  border-radius: 30px 30px 30px 30px;
}
/* ============================================================================= 
6.Home Panel 
============================================================================= */

.My_name {
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
}
.My_name h1 {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin-top: 0px;
  margin-bottom: 5px;
  font-size: 60px;
  line-height: 65px;
  color: #292929;
}
.My_name h3 {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 200;
  color: #555556;
}
.portrait {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}
.portrait img {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 20px 20px 20px 20px;
}
.general_info {
  margin-top: 10px;
}
.general_info p {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
/* social icons */

.social_icons ul {
  width: 100%;
  margin: 0;
  padding: 0;
  outline: none;
  margin-bottom: 30px;
}
.social li {
  float: left;
  display: inline;
  margin-right: 5px;
}
.social li a {
  outline: 0;
}
.social img {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.social img:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}
/* personal info */

ul.personal-info {
  margin: 10px 0 0 0;
  padding-left: 0;
  list-style: none;
}
ul.personal-info li {
  margin-bottom: 12px;
}
ul.personal-info .title {
  display: inline-block;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  border-width: 2px;
  border-style: solid;
  border-color: #E67068;
  border-radius: 22px 22px 22px 22px;
  color: #333;
  padding: 3px 10px;
  position: relative;
  font-size: 13px;
}
ul.personal-info .value {
  margin-left: 10px;
}
ul.personal-info .available {
  /* Font Color For Freelance Status = Available */
  color: #6f803b;
}
ul.personal-info .not_available {
  /* Font Color For Freelance Status = Not Available */
  color: #803b3b;
}
/* ============================================================================= 
7. Resume Panel 
============================================================================= */

.detailsCol {
  width: 100%;
}
.detailsCol h3 {
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 400;
}
.detailsCol ul {
  margin: 0;
  padding: 0;
  padding-right: 10px;
  font-size: 13px;
}
.detailsCol ul li {
  display: inline-block;
  width: 100%;
  margin: 0 0 15px 0;
  padding-left: 10px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #E67068;
}
.detailsCol ul li p {
  margin: 5px 0px 5px 0px;
}
.detailsCol span {
  font-family: 'PT Sans', Arial, Helvetica, sans-serif;
  display: block;
  float: left;
  color: #b4b4b4;
}
.detailsCol span.date {
  color: #E67068;
  float: right;
  font-size: 13px;
  text-transform: none;
  line-height: 11px;
  margin-top: 7px;
  text-decoration: none;
}
/* Skills */

.skillsInfo {
  margin: 10px 0 0px 0;
}
.skillsInfo em {
  position: relative;
  margin-bottom: 2px;
  font-size: 13px;
  color: #292929;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.skill-container {
  background-color: transparent;
  width: 100%;
  height: 12px;
  border-color: #E67068;
  border-width: 2px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border-style: solid;
  margin-bottom: 10px;
}
.skill {
  background-color: #ffa099;
  height: 12px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 0px 6px;
  border-radius: 6px 6px 6px 6px;
  padding: 0 -1px 0 1px;
}
.skill-10 {
  width: 10%;
}
.skill-20 {
  width: 20%;
}
.skill-30 {
  width: 30%;
}
.skill-40 {
  width: 40%;
}
.skill-50 {
  width: 50%;
}
.skill-60 {
  width: 60%;
}
.skill-70 {
  width: 70%;
}
.skill-80 {
  width: 80%;
}
.skill-90 {
  width: 90%;
}
.skill-100 {
  width: 100%;
}
/* =============================================================================
8.Services Panel 
============================================================================= */

.services {
  margin-top: 30px;
}
.service {
  text-align: center;
  margin-bottom: 30px;
}
.service h4 {
  margin-top: 10px;
}
.service img {
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.service img:hover {
  -webkit-transform: rotate(720deg);
  -moz-transform: rotate(720deg);
  transform: rotate(720deg);
}
/* ============================================================================= 
9. Portfolio Panel 
============================================================================= */

.portfolio {
  width: 100%;
  padding: 0;
  margin-left: 5px;
}
/* Portfolio Items */

.portfolio li {
  list-style: none;
  float: left;
  margin-bottom: 10px;
}
.portfolio a {
  display: block;
  text-decoration: none;
}
.portfolio h3 {
  color: #E67068;
}
.portfolio img {
  vertical-align: bottom;
  width: 100%;
  padding: 0;
  margin: 0;
}
/* Portfolio Filter */

ul.filter {
  overflow: hidden;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 15px;
  margin-left: 20px;
  list-style: none;
}
ul.filter li a {
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFF;
  font-size: 12px;
  padding: 5px 7px 5px 7px;
  margin-top: 6px;
  margin-left: 5px;
  line-height: 13px;
  background: #cfd0ca;
  border-radius: 20px;
  text-decoration: none;
  -webkit-transition: all 80ms ease-in;
  /* property duration timing-function delay */
  -moz-transition: all 80ms ease-in;
  /* property duration timing-function delay */
  transition: all 80ms ease-in;
  /* property duration timing-function delay */
}
.filter a:hover {
  color: #FFF;
  background: #E67068;
}
.filter .current a {
  color: #FFF;
  background: #E67068;
}
/* 3D Boxes Rotate Styles */

.rollover {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  float: left;
}
.short {
  width: 100%;
  height: 100%;
}
.front {
  z-index: 2;
  position: relative;
  background: #fff;
}
.back {
  z-index: 1;
  position: absolute;
  margin-top: -80% !important;
}
.rollover:hover .back,
.rollover:focus .back {
  z-index: 2;
}
.rollover:hover .front,
.rollover:focus .front {
  z-index: 1;
}
.fade .rollover .front {
  opacity: 1;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.fade .rollover .back {
  opacity: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.fade .rollover:hover .front,
.fade .rollover:focus .front {
  opacity: 0;
}
.fade .rollover:hover .back,
.fade .rollover:focus .back {
  opacity: 1;
}
.flip .rollover {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}
.flip .cube {
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
  -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
  -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
  -o-transform: rotateX(0) rotateY(0) rotateZ(0);
  transform: rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.flip .front {
  -webkit-transform: translate3d(0, 0, 1px);
  -moz-transform: translate3d(0, 0, 1px);
  -ms-transform: translate3d(0, 0, 1px);
  -o-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
}
.flip .back {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0);
  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
  -ms-transform: rotateY(180deg) translate3d(0, 0, 0);
  -o-transform: rotateY(180deg) translate3d(0, 0, 0);
  transform: rotateY(180deg) translate3d(0, 0, 0);
}
.flip .rollover:hover .cube,
.flip .rollover:focus .cube {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.box .front {
  -webkit-transform: translate3d(0, 0, 60px) scale(0.9, 0.9);
  -moz-transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
  -ms-transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
  -o-transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
  transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
}
.box .back {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.9, 0.9);
  -moz-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
  -ms-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
  -o-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
  transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
}
/* ============================================================================= 
10. Contact Panel 
============================================================================= */

#contactform {
  margin-top: -7px;
  padding-right: 20px;
}
.info_fieldset {
  padding: 0;
  margin: 0;
  bottom: 5px;
  background: none;
  border: 0px;
}
label {
  float: left;
  width: 100%;
  padding: 0 0 2px;
}
input[type="text"] textarea {
  width: 100%;
}
input[type="submit"] {
  padding: 0;
  width: 100%;
  margin: 5px 0 0;
}
/* ============================================================================= 
11. Media Queries 
============================================================================= */

/* Smaller than standard 960 (devices and browsers) */

@media only screen and (max-width: 959px) {
  .step {
    width: 960px;
    height: 470px;
  }
}
/* Tablet Portrait size to standard 960 (devices and browsers) */

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .step {
    width: 768px;
    height: 470px;
  }
}
/* All Mobile Sizes (devices and browser) */

@media only screen and (max-width: 767px) {
  .step {
    width: 300px;
    height: 470px;
  }
  .block {
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #E67068;
    padding: 40px 40px 40px -20px;
    margin-bottom: 30px;
    border-radius: 20px 20px 20px 20px;
  }
  .end {
    margin-bottom: 0;
  }
  .block2 {
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #E67068;
    padding: 0px 0px 0px 0px;
    border-radius: 20px 20px 20px 20px;
  }
  nav ul {
    display: none;
  }
  #dd_menu {
    display: block;
  }
  .My_name h1 {
    font-family: "Oswald", Arial, Helvetica, sans-serif;
    font-weight: 300;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 40px;
    line-height: 45px;
    color: #292929;
  }
  .My_name h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 200;
    color: #555556;
  }
  .portfolio img {
    margin-bottom: 10px;
  }
  .portfolio {
    width: 100%;
    padding: 0;
    margin: 0 0 0 0;
  }
  .jspDrag {
    width: 6px;
    height: 6px;
    background: #999999;
    position: relative;
    opacity: 0.2;
    border-radius: 10px 10px 10px 10px;
    top: 0;
    left: 0;
    cursor: pointer;
    margin-left: 0px;
  }
  a.trigger {
    display: none;
  }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .step {
    width: 420px;
    height: 470px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>First Last - Toronto Software Developer</title>
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
  <meta name="description" content="The best in quality web and software development in the Toronto, Ontario area. Clients receive simple, robust solutions that are valuable to all." />
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/jquery.qtip.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <!-- jmpress plugin -->
  <script src="js/jms.js" type="text/javascript"></script>
  <!-- extends the jmpress plugin -->
  <script src="js/jmpress.js" type="text/javascript"></script>
  <!-- jQuery Easing 1.3 -->
  <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  <!-- Detect Mobile Browser -->
  <script src="js/detectmobilebrowser.js" type="text/javascript"></script>
  <!-- mousewheel -->
  <script src="js/mousewheel.js" type="text/javascript"></script>
  <!-- Quicksand -->
  <script src="js/jquery.quicksand.js" type="text/javascript"></script>
  <!-- prettyPhoto -->
  <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
  <!-- qTip -->
  <script src="js/jquery.qtip.min.js" type="text/javascript"></script>
  <!-- jQuery mobile gmaps -->
  <script src="js/jquery.mobilegmap.min.js" type="text/javascript"></script>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <!-- Contact Form -->
  <script src="js/contact_form.js" type="text/javascript"></script>
  <!-- Settings -->
  <script src="js/main.js" type="text/javascript"></script>
  <!-- Modernizr -->
  <script src="js/modernizr.custom.48780.js" type="text/javascript"></script>


  <!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
    <![endif]-->
  <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->
  <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]-->

  <noscript>
    <style>
      .step {
        position: relative;
      }
      .step:not(.active) {
        opacity: 1;
        filter: alpha(opacity=99);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
      }
      .step:not(.active) a.jms-link {
        opacity: 1;
        margin-top: 40px;
      }
    </style>
  </noscript>
</head>

<body>

  <div class="container">
    <header>
      <div class="sixteen columns">
        <div class="My_name">
          <!-- <img src="images/logo.png" alt="logo"> -->
          <h1>First Last</h1>
          <h3>Software Developer</h3>
        </div>
      </div>

      <!-- Primary Navigation -->
      <nav id="menu" class="sixteen columns">
        <ul id="nav">
          <!-- <nav> -->
          <li class="active">
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#resume">Resume</a>
          </li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>

        <!-- Dropdown Menu For Mobile Device -->
        <select id="dd_menu">
          <option value="#home">Home</option>
          <option value="#resume">Resume</option>
          <option value="#services">Services</option>
          <option value="#contact">Contact</option>
        </select>
        <!-- Dropdown Menu End -->
      </nav>
      <!-- Primary Navigation End -->
    </header>
    <!-- End Part of Title and Menu Navigation -->

    <section id="jms-slideshow" class="jms-slideshow sixteen columns">

      <!-- Home Subpage -->
      <div id="home" class="step" data-x="6000" data-y="1600" data-rotate="0" data-scale="15">
        <div id="jms-content">
          <p>...</p>
        </div>
      </div>

      <!-- Resume Subpage -->
      <div id="resume" class="step" data-x="18000" data-y="2800" data-rotate="-30" data-scale="5">
        <div id="jms-content2">
          <p>...</p>
        </div>
      </div>
      <!-- End Resume Subpage -->

      <!-- Services Subpage -->
      <div id="services" class="step" data-x="22000" data-y="2800" data-rotate="30" data-scale="3">
        <div id="jms-content3">
          <p>...</p>
        </div>
      </div>
      <!-- End Services Subpage -->

      <!-- Contact Subpage -->
      <div id="contact" class="step" data-x="30000" data-y="6500" data-rotate="30" data-scale="3">
        <div id="jms-content5">

          <p>...</p>
        </div>
      </div>
      <!-- End Contact Subpage -->

    </section>
  </div>
</body>

</html>

Answer 1

与 javascript 无关。给你添麻烦了。这只是您造成的 CSS 问题。

我访问了您的网站并更改了它并为我工作(使用 chrome)。

你遇到这个问题的原因是overflow: hidden;

<div class="jms-wrapper step-home delegating-step-home" style="position: relative; overflow: hidden;" tabindex="0">

就在 CSS 中:

.jms-wrapper {
    width: 100%;
    height: 100%;
    outline: none;
    -webkit-appearance: none;
    overflow: inherit !important;
}

body {
    overflow: auto;
    overflow-x: hidden;
}

欢迎您!