My code.
Css:
td div{
width:100%;
height: 40px;
overflow: hidden;
padding-top: 9px;
}
td div:hover{
overflow: auto;
}
Html:
<td><div><?php echo $objProg->getagen(); ?></div></td>
When you mouse over the td you would like the option to scroll with the mouse scroll did not work, so you can only scroll the text by clicking on the arrows.
A very easy way to do it, without needing many lines and very simple:
use: onwheel="return false;"
Jsfiddle: link
Using jQuery you can do this in some ways. You can simply disable scroll as you wish, or force scroll to work only on div in question.
It would look like the examples below:
$('#good').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
$('#bad').hover(function() {
$(document).bind('mousewheel DOMMouseScroll',function(){
stopWheel();
});
}, function() {
$(document).unbind('mousewheel DOMMouseScroll');
});
function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */
e = window.event;
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */
e.preventDefault();
}
e.returnValue = false; /* IE7, IE8 */
}body { min-height: 1200px; padding: 30px; }
p { height: 500px; }
div#bad {
position: absolute;
top: 70px;
left: 330px;
height: 200px;
width: 200px;
background-color: lightgray;
overflow: scroll;
}
div#good {
position: absolute;
top: 70px;
left: 30px;
height: 200px;
width: 200px;
background-color: gray;
overflow: scroll;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>Scrolltobottomofeachdiv</div><divid="good">
<p>Scroll somente na div</p>
End of Div
</div>
<div id="bad">
<p>Remove Scroll jQuery</p>
End of Div
</div>In other ways, you can look at this question that I used as a reference.