前言
在使用vue.js开发项目中,使用了bootstrap.但是直接使用bootstrap的modal时,一些事件失效,滚动条依然是背景滚动条.
原因
vue.js针对页面的渲染有自己的逻辑和时间点.在使用之前的js插件等要根据vue.js的渲染时间点来使用.
解决方式
mounted: function(){
//模态框滚动条调整
$('#myModal').on('show.bs.modal', function () {
console.log('modal hide');
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
$('#myModal').css({
"overflow-x":"auto",
"overflow-y":"auto"
});
});
//模态框滚动条恢复
$('#myModal').on('hide.bs.modal', function () {
console.log('modal hide');
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});
$('#myModal').css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
});
},
在vue.js挂载后,针对modal做滚动条设置