滾動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元素時防止滾動整頁

回答

相關問題