如果您的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