整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們面對現實吧，可怕的“滾動離開”時刻——當用戶點擊模式時，整個頁面卻繼續向下滾動，這種尷尬的情況！這會打亂流程，讓用戶感到沮喪，并帶來不太好的體驗。
但不要害怕，各位小伙伴！為了防止這種常見的網站煩惱比您想象的要容易。以下是4種久經考驗的方法，每種方法都有自己的優點和缺點：
overflow:hidden CSS 屬性是一種久經考驗的防止滾動的方法。只需將一個類（例如，no-scroll）添加到 <body> 標簽，并將其鏈接到帶有 overflow:hidden 的 CSS 規則。
復制
.no-scroll {
overflow: hidden;
}1.2.3.當模態框彈出時，使用 JavaScript 添加此類，并在模態框關閉時將其刪除。此方法會停止滾動并隱藏滾動條。
想要在模態框彈出時保持頁面原位？position: fixed 可以提供幫助！
向<body> 添加 no-scroll 之類的類并應用以下 CSS：
復制
.no-scroll {
position: fixed;
width: 100%;
}1.2.3.4.這會將頁面錨定到視口，保持其原始寬度。請記住確保您的模態框具有適當的高度，否則內容可能會被截斷。
對于更注重 JavaScript 的方法，我們可以使用滾動事件在模態框出現時禁用滾動。
復制
document.addEventListener('scroll', disableScroll);
function disableScroll() {
window.scrollTo(0, 0);
}1.2.3.4.當模式關閉時，刪除事件監聽器以重新啟用滾動。此方法不需要更改 CSS，并且在桌面和移動設備上都能很好地工作。
準備好采用更現代的方法了嗎？overscroll-behavior 屬性可以控制頁面邊緣的滾動行為。
復制
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overscroll-behavior: contain;
}1.2.3.4.5.6.7.通過將其設置為包含，可以阻止頁面滾動，但允許在模式本身內滾動。請記住在模式關閉時刪除此屬性。
這 4 種方法都提供了在模式彈出時，阻止頁面滾動的不同方法。再具體項目開發時，我們需要選擇適合自己項目的情況，來匹配項目的需要，不能隨意選擇。
更多資訊，點擊全場景直播解決方案-航天云網解決方案
近在做項目的時候碰到了使用window.open被瀏覽器攔截的情況, 在本機實驗沒問題, 到了服務器就被攔截了, 火狐有攔截提示, 360瀏覽器攔截提示都沒有, 雖然在自己的環境可以對頁面進行放行，
另外, 可以發現, 當window.open為用戶觸發事件內部或者加載時, 不會被攔截, 一旦將彈出代碼移動到ajax或者一段異步代碼內部, 馬上就出現被攔截的情況了。
使用了一個可定制彈出窗口的外觀、尺寸大小、彈出位置以適應該頁面的window.open()方法, 代碼如下：
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
//寫成一行
-->參數解釋：
window.open 彈出新窗口的命令；
page.html 彈出新窗口的文件名；
newwindow 彈出窗口的名字(不是文件名), 可用空''代替；
height=100 窗口高度；
top=0 窗口距離屏幕上方的像素值；
left=0 窗口距離屏幕左側的像素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar,scrollbars 表示菜單欄和滾動欄；
resizable=no 是否允許改變窗口大小，yes為允許；
location=no 是否顯示地址欄，yes為允許；
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
原因分析
當瀏覽器檢測到非用戶操作產生的新彈出窗口, 則會對其進行阻止。因為瀏覽器認為這可能是一個廣告, 不是一個用戶希望看到的頁面。
解決方案：
1、使用a標簽替代
給出如下函數, 將此函數綁定到click的事件回調中, 就可以避免大部分瀏覽器對窗口彈出的攔截：
function newWin(url, id) {
var a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('target', '_blank'); // 這里可以改為top, 防止彈出多個窗口
a.setAttribute('id', id);
// 防止反復添加
if(!document.getElementById(id)) {
document.body.appendChild(a);
}
a.click();
}2、使用form的submit方法打開一個頁面
這種方法需要構造一個from, 然后由js代碼觸發form的submit, 將表單提交到一個新的頁面, 如：
$("#ID").attr('target', '_blank');
$("#ID").submit();大家注意, 以上兩種方法不適合放在ajax的回調函數中, 如果放在回調函數中, 依然會被瀏覽器攔截。
3、終極解決方案–先彈出窗口, 然后重定向
第三種方案, 其實是一種變通方案, 核心思想是: 先通過用戶點擊打開頁面, 然后再對頁面進行重定向。示例代碼如下：
xx.addEventListener('click', function () {
// 打開頁面，此處最好使用提示頁面
var newTab=window.open('about:blank');
ajax().done(function() {
// 重定向到目標頁面
newWin.location.href = 'target url';
});
});以上方法其實是打開了兩個地址, 所以建議大家打開第一個地址的時候給出一個類似'當前頁面正在加載中，請稍后。。'的簡單提示頁, 這樣可以避免打開兩次真正的目標頁面, 讓用戶察覺到頁面的重定向。
補充：
JS打開新窗口的2種方式
1.超鏈接
<ahref="http://www.xxxxxx.com" title="標題">Hello world</a>等效于js代碼
window.location.href="http://www.xxxxxx.com"; //在同當前窗口中打開窗口2.超鏈接
<a href="http://www.xxxxxx.com" title="標題" target="_blank">Hello world</a>等效于js代碼
window.open("www.xxxxxx.com"); //在另外新建窗口中打開窗口3、關閉新窗口：
在實際開發過程中大家很有可能會用到echarts圖標統計，對于數據量比較多的情況下使用echatrs滾動條也是常有的事，這次我們就用到了，而且還是需要對滾動條進行設置，不是echarts默認的滾動條樣式，就把使用到的過程記錄一下；
如果要使用echarts需要對它進行引用
<script type="text/javascript"src="/echarts-5.2.1/dist/echarts.js"></script>
<div id="div1" style="width:100%;height:290px;padding-top:10px;padding-bottom: 10px"></div>
var myChart = echarts.init(document.getElementById('div1'));
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
dataZoom: [{
type: 'inside',
start:1,//數據窗口范圍的起始百分比,表示1%
end:50//數據窗口范圍的結束百分比,表示35%坐標
}, {
type: 'slider',
height:10,
bottom: 0,
brushSelect:false,
showDetail:false,
showDataShadow:false
}],
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
myChart.setOption(option);
Option中的dataZoom就是圖表中使用的滾動條
{
type: 'inside',
start:1,//數據窗口范圍的起始百分比,表示1%
end:50//數據窗口范圍的結束百分比,表示50%坐標
}
此代碼段是設置滾動條的起始位置
Start：設置滾動條的開始位置，為百分比
End：設置滾動條的結束位置，即滾動條的長度，為百分比
brushSelect：是否開啟刷選功能。在下圖的 brush 區域你可以按住鼠標左鍵后框選出選中部分。
showDetail：是否顯示detail，即拖拽時候顯示詳細數值信息
showDataShadow：是否在 dataZoom-silder 組件中顯示數據陰影。數據陰影可以簡單地反應數據走勢
最終效果
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
