jQuery、ブートストラップ、および 2 つの異なる jQuery プラグインを使用する Web ページがあります。1 つはTurn.jsと呼ばれ、もう 1 つはmCustomScrollbarと呼ばれます。<!DOCTYPE html>今日まで、すべてのリクエストのタグの前にスクリプト タグを追加するサーバー側コードがありました。を使用すると jQuery が不適切な高さを返すという問題が発生していることに別のページで気づいた$(window).height()ので、コードを修正し、スクリプト タグを終了タグの直前に配置する方法を見つけました</body>。ただし、これにより、使用している mCustomScrollBar ライブラリの機能が壊れています
何らかの理由で、スクロール バーが表示されず、マウス ホイール機能が無効になり、モバイル/タッチ デバイスでスクロールが無効になります。プラグインによって html が変更されていることがわかるので、プラグインは間違いなく起動しています。
私の質問は次のとおりです: 不適切な html を使用している場合、JavaScript が正しく動作するのはなぜですか、または少なくともどのように動作したいの<!DOCTYPE html>ですか?
関連コード:
mCustomScrollbar プラグインを適用する html 構造。ページのメイン コンテナである#flip-indesdivの親ブートストラップ。.container-fluidビューでかみそりの構文で C# を使用しています。必要に応じて、ページの生成された html を投稿できます。
<div id="flip-index">
<div class="customScrollbar">
@for (var i = 0; i < Model.Pages.Count; ++i)
{
<div class="index-item" onclick="$('#flipbook').turn('page', @(i + 1));">
<img src="@Config.Get("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" alt="Flipbook index preview" onerror="replaceWithText(event);"/>
<a class="btn btn-primary full-size-img" href="/FlipBook/FullSizeImage?img=@Config.Get("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" target="_blank" title="View Image Full Size">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
<div class="index-number">@(i + 1)</div>
</div>
}
<div class="index-pad"> </div>
</div>
</div>
じぶんの$(document).ready()
try
{
$('.index-item:first-child').addClass('active');
var turnOptions = {};
var width = screenWidth();
$('.main-content').css('padding-top', $('nav.navbar').outerHeight())
$('#flipbook').turn(turnOptions);
var firstImage = $('#flipbook img')[0];
if (firstImage.complete || firstImage.naturalHeight > 0) {
sizeElements();
} else {
firstImage.onload = sizeElements;
}
$('.customScrollbar').mCustomScrollbar({
theme: 'minimal-light',
axis: 'y',
mouseWheel: {
scrollAmount: ($('#flip-index').outerHeight() * (1 / $('.index-item').length)) * 2
}
});
$('#flip-index').css({
left: parseInt($('.main-content').css('padding-left'))
});
// Keep the sidebar and the flipper in sync.
$('#flipbook').on('turning', pageTurning);
window.addEventListener('resize', windowResize);
$('#otherInserts .active, #otherInserts .disabled').on('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
});
}
catch(ex)
{
alert('There was an error loading this page!');
throw ex;
}
finally
{
// remove loading overlay
$('.loading-overlay').fadeOut(function () {
$('.loading-overlay').remove();
});
}
このページにはもっとたくさんの js がありますが、mCustomScrollbar プラグインを参照しているものはありません。もっと多くのコードを投稿してほしいという人がいれば、喜んで投稿します。
答えは、ブラウザーが html を検証できるかどうかに基づいて、ブラウザーが私の js または html マークアップを解釈する方法のどこかにあると思います。