自定义 DNN 皮肤无法检测到底部滚动，但它可以反向工作 (7.1.1）

Custom dnn skin can't detect bottom scroll but it works reversed (7.1.1)

本文关键字：工作 DNN 检测 滚动 底部 自定义      更新时间：2023-09-26

首先，我认为这是JS问题，但这是皮肤问题。
并提到这个问题正在发生在 Chome 和 FF 上，但在 IE 中它出于某种原因工作。

我是第一次为 DNN 设计皮肤，直到我发现我:(做错了什么，它一直很好。

我已经在内容窗格上创建了一个简单的皮肤。在该内容窗格中，我添加了我的自定义模块，该模块在用户滚动到页面底部时动态加载元素（我将新元素附加到div）。

我的模块在" DarkKnightSkin"上运行良好，但在我的自定义皮肤上，我认为我错过了一些东西，所以欢迎任何帮助:)

问题是当我滚动到底部时没有任何反应。但是当我滚动到顶部时，它会触发操作并执行它需要做的事情。我在这里做错了什么？

这是skin.ascx

<div id="wrapper">
    <header>
        <div id="top-bar-menu">
            <div id="top-bar-menu-logo-holder">
                <dnn:LOGO runat="server" ID="dnnLOGO" />
            </div>
            <div id="user-account-box" style="position: absolute; top: 5px; right: 5px;">
                <dnn:USER runat="server" ID="dnnUSER" />
                <dnn:LOGIN runat="server" ID="dnnLOGIN" />
            </div>
        </div>
    </header>
    <nav>
        <div id="main-navigation-menu">
            <ddr:MENU ID="MENU1" MenuStyle="Superfish" runat="server">
                <ClientOptions>
                    <ddr:ClientString Name="speed" Value="fast" />
                </ClientOptions>
            </ddr:MENU>
        </div>
        <div class="clear"></div>
    </nav>
    <div id="main-content-holder">
        <div runat="server" id="ContentPane"></div>
    </div>
</div>

这是皮肤.css

body {
    background:#fff;
    font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
    font-size:62.5%; /* Sets default font size to 10px */
    color:#222222;
    }
* {
    margin:0;
    padding:0;
    }
img {
    border:0;
    }
p {
    margin-bottom:1.75em;
    }
a {
    text-decoration:none;
    color:#B4C835;
    }
a:hover {
    text-decoration:none;
    color:#6CC7DC;
    }
header, footer, nav, section
{
    display: block;
}
.clear {
    clear: both;
}
#wrapper {
    background:#ffffff;
    font-size:1.20em;
    }
#top-bar-menu{
height: 52px; 
color: #000;
width: 100%;
position: relative;
}
#user-account-box a{color:#000 !important;}
#top-bar-menu-logo-holder{
width: 150px;
}
#top-bar-menu-logo-holder img{
max-width: 50px;
}
#main-navigation-menu{ 
color:#000;
width:450px;
    margin: auto;
    position: relative;
    z-index:10000; 
}
nav
{   
    margin: 0;
    width: 100%;
    z-index: 9;
    background-color: #ECECEC;
    border-top: 1px solid #CFCACA;
}

在我的模块中：

 $(window).scroll(function () {        
        if ($(window).scrollTop() == $(document).height() - $(window).height() && !($('#imgLoad').is(':visible'))) {           
            loadMore();
        }
    });



更新

我创建了一个新的skin.asmx和skin.css（空文件），只放了这个：

<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<div runat="server" id="ContentPane"></div>

我的模块仍然呈现良好，但在滚动底部不起作用，回到顶部工作（仍然相反）。



更新 2

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {margin:0;padding:0;}
img, fieldset {border:0;} img {max-width:100%;height:auto;} .ie8 img {width:auto;height:auto;} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
html {height:100%;}
body {background:#eeeeee url(images/mbg.jpg);font: 100%/1.2 Droid Sans, Helvetica, Arial, sans-serif;color:#333;min-height:100%;overflow-x:hidden;}
    p {margin: 0 0 1.6em;padding:0;text-shadow:1px 1px 1px #fff;}
    table{}
    a {text-decoration:none;outline:none;color:#834202;}
        a:hover {color:#000;text-decoration:underline;}
    big {font-size: 16px;}  small {font-size: 87%;} strong, b {color: #41322a;} em, i {font: italic 115% Baskerville, Georgia, "Times New Roman", Times, serif;}
    em strong {color: #8e3d17;font: bold 70% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif; text-transform: uppercase;letter-spacing: .1em;}
    ul, ol {margin:1.2em 0 1.4em 3em;padding:0;} li{margin:0 0 .3em 0;padding:0;text-shadow:1px 1px 1px #fff;}
    code {font-family: Consolata, monospace;font-size: 100%;color: #72008a;word-spacing: -.25em;}
    pre code {background: #f3efc3 url(images/line-bg.png) 0 7px;overflow-x: auto;display: block;width: 95%;padding: 2% 2.5%;margin: 30px 0;clear: both;color: #585535;font-size: 85%;line-height: 140%;border: solid 1px #e8e3b8;border-bottom: solid 1px #d9d4a8;}
    blockquote {font: italic 130%/140% Baskerville, "Times New Roman", Times, serif;background: url(images/quote.png) no-repeat 5px 0;padding: 0 30px 15px;}
    h1, h2, h3, h4, h5, h6 {font-family:Droid Sans, Helvetica, Arial, sans-serif;line-height:130%;font-weight:bold;color:#453630;margin:1.4em 0 .6em;text-shadow:1px 1px 1px #fff;}
    h2{font-size:1.6em;font-weight:bold;color:#2a353c;clear:both;letter-spacing:-0.035em;margin:1em 0;line-height:1;}
        h2.dnnPEMContTitle .Head, h2 .Head{font-size:1em;}
    h3 {font-size:125%;margin:0.5em 0 .3em;letter-spacing:-.04em;}
        h3 em {color: #8f0206;font: italic normal 100% "Times New Roman", Times, serif;}
    h4 {margin: 1em 0 .2em;font: italic 155% Baskerville, "Times New Roman", Times, serif;}
    form p {margin:0;padding:6px 0;}
    /*form label {font-size:0.825em;}*/
    form label small, form label em {text-transform: none;color: #8c8c86;font: italic 90% "Times New Roman", Times, serif;}
    /*input, textarea, select {font-size:100%;font-family:inherit;}*/
    input[type=text] {width:240px;max-width:96%;}
    textarea {line-height:150%;width:96%;}
        textarea:focus, input[type=password]:focus, input[type=text]:focus {outline: none;background: #faf7dd;}
    input[type=reset], input[type=submit] {background: #68584c;text-transform: uppercase;color: #fff;border: none;padding: 7px 20px;border-bottom: solid 1px #55473b;cursor: pointer;-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.1);-moz-box-shadow: 0 2px 0 rgba(0,0,0,.1);box-shadow: 0 2px 0 rgba(0,0,0,.1);-webkit-border-radius: 5px;  -moz-border-radius: 5px;border-radius: 5px;-webkit-appearance: none;}
    input[type=reset]:hover, input[type=submit]:hover {background: #3f332a;color: #fff;}
    .clear{clear:both;overflow:hidden;}

我将首先查看 DarkKnight 加载了哪些 JS 资源（查看 ASCX，或查看应用了皮肤的页面的 HTML 源代码），并查看哪些资源加载在那里，哪些资源未加载到您的皮肤文件中。

对于遇到类似情况的其他人，请尝试将form {height: 100%;}放入您的 CSS 中。这为我解决了页面高度问题。DNN 将所有内容包装在表单标记中，很容易忘记它的存在。

相关文章：