堆栈内存溢出
  简体   繁体   English

滚动过程中的错误行为，根据代码的链接方式显示

[英]Incorrect behaviour during scrolling, that shows shows up depending on how the code is linked

 原文  2016-02-18 12:56:35  0   2    javascript/ jquery

问题描述

I have a real problem coming up with a good title, i have tried my best. 我有一个真正的问题，想出一个好标题，我已经尽力了。

The problem starts when i try to experiment with adding material to the bottom of the page. 当我尝试在页面底部添加材料时，问题就开始了。 I have tried the following on jsfiddle , and it works! 我在jsfiddle上尝试了以下方法 ，它可以工作！ When i scroll down new <div> s are generated just fine, and they are generated when/where necessary. 当我向下滚动时，会很好地生成新的<div> ，并且它们会在必要时/必要时生成。

So i attempt to do it without jsfiddle, and put the code all in one page: 因此，我尝试在没有jsfiddle的情况下执行此操作，并将代码全部放在一页中： 

<html>
<meta>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
                        var a = $('<a class="post" href="?">');
                        a.append('<div class="name_of_post">TITLE</div>');
                        a.append('<div class="descriptioin_of_post">DESCRIPTION</div>');
                        $('a.post').last().after(a);
                        console.log($(document).height(), $(window).scrollTop(), $(window).height());
   }
     });
});
  </script>
  <style>
.post{
        position: relative;
        display: inline-block;
        width: 49%;
        height: 150px;
        margin-top: 20px;
        margin-left: 2%;
        background-color: #FFF;
        box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
        overflow: hidden;
        padding: 10px 20px;
        -moz-user-select: none; 
        -webkit-user-select: none; 
        -ms-user-select:none;
        user-select:none;
        -o-user-select:none;
        transition: outline 0.3s; 
        text-decoration: none;
        outline: solid 5px transparent;
}
.post:hover{
        outline: solid 5px #fc490a;
}
.post:first-child{
        margin-top: 0;
        margin-left: 0;
}
.post:nth-child(2){
        margin-top: 0
}
.post:nth-child(2n+1){
        margin-left: 0;
}
.img_of_post{
        position: absolute;
        left:0px;
        width: 35%;
        top: 0px;
}
.name_of_post{
        font-family: SegoeUIRegular;
        font-weight: bold;
        font-size: 20px;
        color:black;
        padding-bottom: 8px;
        margin-left: 36.5%;
        line-height: 23px;
}
.descriptioin_of_post{
        font-family: SegoeUIRegular;
        font-weight: normal;
        font-size: 13px;
        color:#666666;
        margin-left: 36.5%;
        line-height: 17px;
}
  </style>
</head>
<body>
 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>
 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>
 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>
 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>
</body>
</html>

Please note, that it is the exact same code as is on jsfiddle, with only some differences (added <html> tag, built-in css into the page and added script tags manually). 请注意，它与jsfiddle上的代码完全相同，只是有些不同（添加了<html>标记，页面中内置的CSS和手动添加了脚本标记）。

And here the problem starts, for some reason new <div> s are generated only when i scroll up. 问题开始了，由于某种原因，仅当我向上滚动时才会生成新的<div> 。 In other words i need to be scrolling up and hit the top, rather than scrolling down and hitting the bottom. 换句话说，我需要向上滚动并到达顶部，而不是向下滚动并到达底部。

Why is this happening in the single page HTML code? 为什么在单页HTML代码中会发生这种情况？ What do i need to do for this to work the same way as in JSFiddle? 我需要做些什么才能使其与JSFiddle中的工作方式相同？

2 个解决方案

解决方案1
 1  2016-02-18 13:32:26

When there is no scrollbar your code doesnt work.. I have added mousewheel event kindly try the following 当没有滚动条时，您的代码无效。.我已添加mousewheel事件，请尝试以下操作 

<!DOCTYPE html> 
<html>
<meta>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $(window).scroll(function() {
   if($(window).scrollTop()  == ($(document).height() -  $(window).height())) {
                        var a = $('<a class="post" href="?">');
                        a.append('<div class="name_of_post">TITLE</div>');
                        a.append('<div class="descriptioin_of_post">DESCRIPTION</div>');
                        $('a.post').last().after(a);
                        console.log($(document).height(), $(window).scrollTop(), $(window).height());
   }


     });
     $(document).on('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 < 0) {

         if ($("body").height()< $(window).height()) {
        var a = $('<a class="post" href="?">');
                        a.append('<div class="name_of_post">TITLE</div>');
                        a.append('<div class="descriptioin_of_post">DESCRIPTION</div>');
                        $('a.post').last().after(a);
                        console.log($(document).height(), $(window).scrollTop(), $(window).height());
         }
      }

});
});
  </script>
  <style>
.post{
        position: relative;
        display: inline-block;
        width: 49%;
        height: 150px;
        margin-top: 20px;
        margin-left: 2%;
        background-color: #FFF;
        box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
        overflow: hidden;
        padding: 10px 20px;
        -moz-user-select: none; 
        -webkit-user-select: none; 
        -ms-user-select:none;
        user-select:none;
        -o-user-select:none;
        transition: outline 0.3s; 
        text-decoration: none;
        outline: solid 5px transparent;
}
.post:hover{
        outline: solid 5px #fc490a;
}
.post:first-child{
        margin-top: 0;
        margin-left: 0;
}
.post:nth-child(2){
        margin-top: 0
}
.post:nth-child(2n+1){
        margin-left: 0;
}
.img_of_post{
        position: absolute;
        left:0px;
        width: 35%;
        top: 0px;
}
.name_of_post{
        font-family: SegoeUIRegular;
        font-weight: bold;
        font-size: 20px;
        color:black;
        padding-bottom: 8px;
        margin-left: 36.5%;
        line-height: 23px;
}
.descriptioin_of_post{
        font-family: SegoeUIRegular;
        font-weight: normal;
        font-size: 13px;
        color:#666666;
        margin-left: 36.5%;
        line-height: 17px;
}
  </style>
</head>
<body>

 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>
 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>
 <a class='post' href='.'>
    <div class='name_of_post'>OLD DIV</div>
    <div class='description_of_post'>old description</div>
 </a>


</body>
</html>

` `

解决方案2
 1 已采纳  2016-02-18 13:36:03

Replace in your code: 替换为您的代码： 

if($(window).scrollTop() + $(window).height() == $(document).height()) {

to 至 

if($(window).scrollTop() + window.innerHeight == $(document).height()) {

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 代码显示意外行为 - code shows unexpected behaviour appendTo显示奇怪的行为 - appendTo shows strange behaviour 数组显示不正确的长度 - Array shows incorrect length 滚动时，Datatables固定标头显示两次 - Datatables fixed header shows up twice when scrolling 如何确保ExtJS Datepicker完全显示？ - How to ensure ExtJS Datepicker shows up completely? 在键盘显示之前如何采取措施？ - How to take an action before keyboard shows up? Analytics（分析）事件代码显示在源代码中，而不显示在控制台中 - Analytics event code shows up in source code but not in console 推文按钮显示不正确的推文 - Tweet button shows incorrect of tweets javascript 中的高亮文本显示不正确 - Highlight text in javascript shows incorrect 名称显示为“未定义” - Name shows up as "undefined"
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM