Если ваш 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>
Thanx, он частично работает. Тем не менее, я все еще могу прокручивать вверх и вниз, и мне хотелось бы оторваться от области, чтобы она была визуально понятна и пользователю. – YourReflection
@YourReflection Не уверен, что мы можем сделать с прокруткой - обычно элемент вроде этого поймает колесо прокрутки. Я добавил строку для добавления фона (черный, 30% прозрачности) - посмотрите, дает ли это эффект, который вам нужен. Вы можете настроить его на белый вместо более яркого наложения ('255, 255, 255') и настроить альфа-значение (' .3'). –
Спасибо! Осталось только прокрутить страницу :) – YourReflection