I'm using:
<style type="text/css" media="print,screen">
#aviso {
pointer-events:none;
}
</style>
to deny the option to click inside that div, but I want to be able to scroll inside it, which does not allow me to do
Any solution?
I'm using:
<style type="text/css" media="print,screen">
#aviso {
pointer-events:none;
}
</style>
to deny the option to click inside that div, but I want to be able to scroll inside it, which does not allow me to do
Any solution?
You could choose a parent element since pointer-events only applies to the current element but the event as such does bubble so it does not affect the scroll and other events of its parent elements.
I assume you have something like this
#aviso {
pointer-events: none;
height: 300px;
width: 300px;
overflow-y: auto;
}
#child {
background-color: red;
color: white;
font-weight: bolder;
height: 500px;
padding-top: 250px;
}<div id="aviso">
<div id="child">
Contenido
</div>
</div>Indeed the scroll does not work. This is an example of how you could do it without using javascript and the scroll works again
#aviso {
pointer-events: none;
height: 300px;
width: 300px;
}
#child {
background-color: red;
color: white;
font-weight: bolder;
height: 500px;
padding-top: 250px;
}
#parent {
width: 300px;
overflow-y: auto;
}<div id="parent">
<div id="aviso">
<div id="child">
Contenido
</div>
</div>
</div>This is an option with jQuery:
$('#aviso').click(false);
Another option would be with unbind :
$('#aviso').unbind('click');
Another option with javascript, although it's more a trick than disabling the click:
document.getElementById("aviso").onclick = function(){return false;}