如果您的PDF渲染为意在页面加载,你只是想防止鼠标交互,你可以用一种无形的元素掩盖它,像这样用CSS:
#pdf {
position: relative;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
并根据您的请求,的方式来切换该开/关(使用jQuery):
$('#toggle').on('click', function() {
if ($('#pdf').hasClass('enable')) {
$('#pdf').removeClass('enable').on('mousedown scroll', function() { return false; });
$(this).text('Enable PDF Interaction');
} else {
$('#pdf').addClass('enable').off();
$(this).text('Disable PDF Interaction');
}
});
#pdf {
position: relative;
/* sizes for example since PDF won't load: */
width: 650px;
height: 500px;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
#pdf.enable::before {
content: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Disable PDF Interaction</button>
<div id="pdf" class="enable">
<object width="650" height="500" type="application/pdf" data="https://upload.wikimedia.org/wikipedia/en/d/dc/Convergent_Synthesis_Example.pdf" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>
感谢名单,但部分工作。我仍然可以上下滚动,但我想将该区域变灰,以便用户也能清楚地看到它。 – YourReflection
@YourReflection不知道我们可以做些什么关于滚动 - 通常这样的元素将捕捉滚轮。我附加了一行来添加背景(黑色,30%的透明度) - 看看是否给出了你想要的效果。你可以将它调整为白色而不是更亮的叠加层('255,255,255')并调整alpha值('.3')。 –
谢谢!唯一剩下的就是现在滚动:) – YourReflection