滚动div元素时防止滚动整页

我想要在滚动div元素时阻止页面滚动到上一页。现在我正在使用Alvarotrigo的整页滚动，不确定这是否相关。基本上，在这个页面有2个“页面”。 “.table-responsive”在第二页上，我将它设置为溢出：滚动。在该div中滚动时，它也滚动到第1页。滚动div元素时防止滚动整页

我已经试过这但这不起作用：

$('.table-responsive').on('mousewheel DOMMouseScroll', function (e) { 

var e0 = e.originalEvent; 
var delta = e0.wheelDelta || -e0.detail; 

this.scrollTop += (delta < 0 ? 1 : -1) * 30; 
e.preventDefault(); 
});

HTML：

<div class="table-responsive"> 
    <div class="table"> 
     <thead>TABLE</thead> 
     <tbody>...</tbody> 
    </div> 
</div>

CSS：

.table-responsive { 
width: 70%; 
text-align: left; 
margin-top: 30px; 
margin-bottom: 30px; 
margin-left: auto; 
margin-right: auto; 
height: 40vh; 
overflow: scroll; 
border: 3px solid #fff; 
background-color: rgba(0,0,0,0.6); 
}

来源

2017-03-14 Chicky Egg

只是使溢出隐藏到body元素。适用于我的模式罚款 – mtizziani

$('.table-responsive').on('mouseover', function(){ 
    $('body').css('overflow', 'hidden'); 
}).on('mouseout', function(){ 
    $('body').css('overflow', 'auto'); 
});

认为这是你是什么寻找

来源

2017-03-14 07:17:05 mtizziani

这不是什么即时通讯寻找 –

.table-responsive { 
max-width: 70%; 
} 
or 
.table-responsive { 
max-width: 250px; 
}

来源

2017-03-14 07:19:25

滚动div元素时防止滚动整页

回答

相关问题