问题
First I thought this is JS issue but this is skin issue.
And to mention that this issue is happening to the Chome and FF but in IE it works for some reason.
I am designing skin for the first time for DNN and it goes fine until I find out that I have made something wrong :(.
I have created a simple skin that have on content pane. In that content pane I added my custom module that load elements dynamically when user scroll to the bottom of the page (I append new elements to the div).
And my module work fine on "DarkKnightSkin" but on my custom skin I think that I have miss something so any help is welcome :)
Problem is that when I scroll to the bottom nothing happens. But when I scroll to the top it fires action and do what it need to do. What I did wrong here?
This is 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>
This is skin.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;
}
In my module:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !($('#imgLoad').is(':visible'))) {
loadMore();
}
});
UPDATE
I created a new skin.asmx and skin.css (empty file) and put only this:
<%@ 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>
My module still render fine but on scroll bottom doesn't work and on back to top work (still reversed).
UPDATE 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;}
回答1:
I would start by looking at what JS resources are loaded by DarkKnight (either look at the ASCX, or view the HTML source of a page with the skin applied) and see which resources are loaded there, that aren't loaded on your skin file.
回答2:
For anyone else running into something like this, try putting form {height: 100%;} in your CSS. That has solved page height problems for me. DNN wraps everything inside a form tag and it is easy to forget that it is there.
来源：https://stackoverflow.com/questions/18685692/custom-dnn-skin-cant-detect-bottom-scroll-but-it-works-reversed-7-1-1