Question

我在论坛上搜索了所有可能的解决方案，似乎没有任何效果。我想滚动设备高度时执行任务。

我已直接从类似问题的解决方案中应用了JS。我必须做一些其他事情（一些微不足道的事情，我敢打赌）错了。

我附上了我的整个代码。我对论坛比较陌生，所以请原谅我任何错误。提前致谢！：）

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>The Restaurant Website!!</title>

<!-- Bootstrap version v3.3.7 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">

<!-- Custom style sheet for the page -->
<link href="css/index_style.css" rel="stylesheet">


<!-- .js files placed in the end of <body> so that the page loads faster -->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Custom script for the page -->
<script src="js/index_js.js" type="text/javascript"></script>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top scroll " style="opacity: 0.6;">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Restaurant Logo</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

<div class="cover-image">
    <div class="logo">
        <span class="border">Restaurant Logo</span>
    </div>
    <div class="caption">
        <span class="border"><a href="#">Book a table</a></span>
    </div>
</div>

<div class="detail" style="min-height: 100%;">
    <div class="row">
        <div class="col-md-6 crop">
            <img src="images/plate.jpg" style="max-width: 135%; margin-left: -10px; opacity: 0.65;">
        </div>

        <div class="col-md-6" style="padding: 0px 30px;">
            <h1 class="text-center text-danger vibur">Restaurant quote !</h1>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="menu-btn">
                <span class="btn btn-danger"><a href="#" style="font-size: 20px; letter-spacing: 2px; color: inherit; text-decoration: none;">Menu  <span class="glyphicon glyphicon-align-justify"></span></a></span>
            </div>
        </div>
    </div> 
</div>

<div class="cover2">

</div>

<div class="detail-alt">

    <div class="container-fluid">

        <span class="col-md-6"></span>

        <div class="col-md-3">
            <div class="info-card">
                <h3 class="card-head">Opening Time</h3>
                <hr class="hr-line">
                <br>
                <ul class="card-list">
                    <li>LUNCH SERVICE</li>
                    <li>Friday - Sunday: 11am - 1.30pm</li>
                    <li> </li>
                    <li>DINNER SERVICE</li>
                    <li>Daily: Bookings Available 6am - 9.30pm</li>
                </ul>
            </div>
        </div>

        <div class="col-md-3">
            <div class="info-card">
                <h3 class="card-head">Contact Us</h3>
                <hr class="hr-line">
                <br>
                <ul class="card-list">
                    <li><span class="glyphicon glyphicon-envelope"></span>&emsp;hello@restaurant.com</li>
                    <li><span class="glyphicon glyphicon-map-marker"></span>&emsp;123 Blank Road, Somewhere, AB 12345</li>
                    <li><span class="glyphicon glyphicon-earphone"></span>&emsp;(+1) 123-123-123</li>
                </ul>
            </div>
        </div>

    </div>
</div>

</body>
</html>

CSS：

@font-face {
    font-family: vibur;
    src: url('../fonts/Vibur-Regular.ttf');
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
    overflow-x: hidden;
}

.vibur {
    font-family: vibur;
}

.scroll {
    visibility: collapse;
}

.cover-image, .cover2 {
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image {
    background-image: url('../images/cover.jpeg');
    min-height: 100%;
}

.cover2 {
    background-image: url('../images/cover2.jpeg');
    min-height: 50%;
}

.logo {
    position: absolute;
    left: 0;
    top: 25%;
    width: 100%;
    text-align: center;
    color: #000;
}

.logo span.border {
    background-color: #111;
    color: #fff;
    padding: 15px;
    font-size: 35px;
    letter-spacing: 8px;
}

.caption {
    position: absolute;
    left: 0;
    top: 75%;
    width: 100%;
    text-align: center;
    color: #000;
}

.caption span.border {
    background-color: #111;
    color: #fff;
    padding: 18px;
    font-size: 25px;
    letter-spacing: 5px;
}

.menu-btn {
    position: relative;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 18px;
    font-size: 25px;
    letter-spacing: 5px;
    opacity: 0.8;
}
.detail {
    color: #777;
    background-color: rgb(250, 251, 245);
    text-align: center justify;
    padding: 100px 80px;
}

.detail-alt {
    color: #FF5E5E;
    background-color: #A94442;
    text-align: center justify;
    padding: 40px 35px;
    min-height: 60%;
    opacity: 0.9;
}

.crop {
    overflow: hidden;
}

h1 {
    font: 400 45px/1.8 "Arial Black", Gadget, sans-serif;
    letter-spacing: 2px;
}

.border a, a:hover, a:focus {
    color: inherit;
    text-decoration: inherit;
}

.info-card {
    color: rgb(250, 251, 245);
    text-align: left;
    width: 100%;
    line-height: 30px;
}

.info-card ul {
    list-style: none;
}

.info-card hr {
    display: block;
    margin-left: auto;
    margin-right: 80%;
    border-style: groove;
    border-width: 2px;
}

.card-head {
    font: 400 22px/1.8;
    letter-spacing: 2px;
}

.card-list {
    width: 150%;
    left:0;
    margin-left: -30px;
}

@media only screen and (max-device-width: 1024px) {
      .cover, .cover2 {
          background-attachment: scroll;
      }
  }

JS：

    var iScrollPos = 0;
$(document).ready(function() {

    $(window).scroll(function () {
        var iCurScrollPos = $(this).scrollTop();
        if (iCurScrollPos > iScrollPos) {
            alert('down');
        } else {
            alert('up');
        }
        iScrollPos = iCurScrollPos;
    });
    alert("document is ready");
});

Answer 1

您需要删除以下CSS（overflow-x: hidden;）属性才能生效！

<强>原因：

在html上设置overflow属性会删除它的滚动能力

另外，请在下面查看关于SO的讨论！

SO Answer

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
    /*overflow-x: hidden;*/
}

<强>样本：

JSFiddle Demo

即使使用论坛解决方案，jQuery滚动功能也无法正常工作

1 个答案: