vue自定義遮罩層並隱藏滾動條

2021-10-05 13:24:33 字數 961 閱讀 8581

"openmask()"

>開啟遮罩層<

/button>

="mask-overall" v-if=

"showmask"

>

<

!-- 遮罩層裡面的內容 --

>

="mask-main"

>

"closemsk()"

>關閉遮罩層<

/button>

<

/div>

<

/div>

<

/div>

<

/template>

export

default},

watch:

else},

},methods:

,closemsk()

,stop()

; document.body.style.overflow=

'hidden'

; document.

addeventlistener

("touchmove"

,mo,

false);

//禁止頁面滑動},

/***取消滑動限制***/

move()

; document.body.style.overflow='';

//出現滾動條

document.

removeeventlistener

("touchmove"

,mo,

false);

}},}

<

/script>

"scss" scoped>

.mask-overall

100%

}.mask-main

}<

/style>

Vue自定義滾動條niceScroll

參考 安裝jquery依賴npm install jquery在webpack.config.js中新增以下 並重新執行 新增 plugins new webpack.provideplugin 安裝jquery.nicescroll依賴npm install jquery.nicescroll在m...

自定義滾動條

滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道,一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...

自定義滾動條

body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...