常見場景
在許多填寫表單的頁面中，都會彈出乙個選擇器，讓你在彈窗中選擇專案。有時，彈窗本身容納不下內容，需要讓它不斷滾動來展示，但因為事件是冒泡的，有時就會造成底部(body 的z-index肯定是在下面的 )的內容也在滾動。這內外一起滾，就有點尷尬了。
舉例，下面兩張圖里，都有類似的問題。那麼怎麼解決呢？
從event. target入手
一種思路就是從事件入手，如果事件物件不是彈窗的話，就讓它什麼都不做。
(其實這裡有個疑惑，為什麼不能通過阻止冒泡來阻止外層的body滾動呢？換了好幾個事件型別都不行，不管是scroll還是touchmove，很奇怪。
實踐發現，touchmove事件的確不會冒泡了，但body仍然在滾動。。。那我不就不知道事件實現的機制到底是什麼了，而且用瀏覽器模擬的移動端，也不知道是不是模擬有誤。。。
總之，event.stoppropagation() 方法在這裡不是很管用。。。
比如圖一中的每一欄滾動條，classname為listcol，而彈窗為.listcol，那麼可以這麼做：
$(『.box--listcol『).on(『touchmove『, function(event) )
} else )
methods: {
togglecontainertouchaction(v) {
const container = document.queryselector(『.container『)
if (!container) {
return
container.style[『touch-action『] = v ? 『none『 : 『auto『
stoptouch(e) {
e.preventdefault()
conclusion
直接鎖定body在移動端和web都適用，但如果是從事件入手的話，就要根據需要選擇到底是用touch 還是 mousewheel 了。
酌情使用吧，如果乙個頁面中有很多不同的彈窗，那麼對每乙個彈窗的蹦出和消失都加上togglebody事件也是挺煩的。。。也要考慮到用什麼工具做的頁面，如果是框架的話，在元件裡綁會相對簡潔一些。。。
vue 設定滾動條 ant design vue
ant design vue元件中沒有關於滾動條的設定 內容如下 安裝模組 npm install vuescroll main.js中引入 import vuescroll from vuescroll 引入vuescroll import vuescroll dist vuescroll.css...
vue實用demo滾動條美化
先看看滾動條美化前後的對比效果，美化後滾動條變苗條了，看著舒服一些 滾動條美化主要是通過css來調整樣式，主要涉及如下三個類 webkit scrollbar 滾動條的寬度 webkit scrollbar track 滾動條軌道 webkit scrollbar thumb 滾動條滑塊 scrol...
vue更改預設滾動條樣式
vue更改預設滾動條樣式用的是vuescroll 安裝模組 npm install vuescroll main.js中引入 import vuescroll from vuescroll 引入vuescroll import vuescroll dist vuescroll.css 引入vuesc...