整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          padding: 20px
          
        
           
          
	
	
          
		
          什么是頁面跳動？
          

          在瀏覽網頁時，有時會遇到頁面跳動的情況。頁面跳動指的是當頁面內容不足以填滿整個瀏覽器窗口時，當我們從一個頁面滾動到另一個頁面時，整個頁面會突然跳動或抖動。這種跳動或抖動給用戶帶來了不舒適的體驗，并且可能會影響到頁面的可用性和易用性。
          

          頁面跳動的原因
          

          頁面跳動的原因之一是當頁面的內容不足以填充整個瀏覽器窗口時，瀏覽器會自動隱藏滾動條，從而使頁面寬度變窄。當我們從一個頁面滾動到另一個頁面時，由于頁面寬度的改變，整個頁面會跳動或抖動。
          

          防止頁面跳動的解決方案
          

          為了解決頁面跳動的問題，我們可以使用HTML代碼來始終顯示瀏覽器滾動條。下面是一種常用的方法，通過設置CSS樣式來實現：
          

          

          

          在上面的代碼中，我們使用了body元素來設置網頁內容區域的最小寬度為100%，并設置了縱向滾動條的樣式。通過設置min-width: 100%，我們可以確保頁面內容區域始終填充整個瀏覽器窗口的寬度。通過設置-x: hidden，我們可以強制瀏覽器始終顯示縱向滾動條，即使頁面內容沒有超出視區。
          

          示例說明
          

          為了更好地理解如何使用上述代碼防止頁面跳動，我們可以創建一個簡單的示例。下面是一個示例的HTML代碼：
          

          html>
<html>




    
          
        
          示例頁面
          
        
          這是一個示例頁面，用于演示如何使用HTML代碼始終顯示瀏覽器滾動條以防止頁面跳動。
          
        
          當頁面內容不足以填充整個瀏覽器窗口時，我們可以使用上述代碼來確保頁面始終顯示滾動條。
          
    
          



          

          在上面的示例中，我們在標簽中添加了上述代碼。通過設置.content樣式，我們定義了一個寬度為1000像素的內容區域，并通過margin: 0 auto和padding: 20px將內容居中并添加了一些內邊距。
          

          當我們在瀏覽器中打開這個示例頁面時，即使頁面內容不足以填充整個瀏覽器窗口，頁面也不會跳動或抖動。瀏覽器始終會顯示縱向滾動條，以確保用戶可以使用滾動條滾動頁面內容。
          

          總結
          

          在本文中，我們介紹了如何使用HTML代碼始終顯示瀏覽器滾動條以防止頁面跳動。通過設置body元素的樣式，我們可以確保頁面內容區域始終填充整個瀏覽器窗口的寬度，并強制瀏覽器始終顯示縱向滾動條，從而避免頁面跳動的問題。通過示例代碼的演示，我們可以更好地理解如何實現這一效果。希望本文對您有所幫助！
          vue獲取滾動條的滑塊
          

          文章目錄
          

          1、vue2獲取滾動條位置
          

          方式
          

          export default {
	name: "demo",
	data() {
		return {
			scrollTopVal: 0,
			isScroll: 0
		};
	},
	mounted() {
		this.$nextTick(() => {
			// 開啟滾動條監聽
			document.addEventListener("scroll", this.scrollTop, true);
			let elVal = document.getElementsByClassName('el-drawer__body')[0];
			this.isScroll = elVal.scrollHeight > elVal.clientHeight;
		});
	},
	beforeDestroy() {
		document.removeEventListener('scroll', this.scrollTop, true);
	},
	methods: {
		scrollTop() {
			let elVal = document.getElementsByClassName('el-drawer__body')[0];
			this.scrollTopVal = elVal.scrollTop;
		}
	}
};

          

          window方式
          

          export default {
	name: "demo",
	data() {
		return {
			scrollTopVal: 0,
			isScroll: 0
		};
	},
	mounted() {
		this.$nextTick(() => {
			// 開啟滾動條監聽
			window.addEventListener("scroll", this.scrollTop, true);
			let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
			this.isScroll = elVal.scrollHeight > elVal.clientHeight;
		});
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.scrollTop, true);
	},
	methods: {
		scrollTop() {
			let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
			this.scrollTopVal = elVal.scrollTop;
		},
	}
};

          

          2、vue3獲取滾動條位置
          

          公共部分
          

          import { nextTick, ref, onMounted, onBeforeUnmount } from "vue";

          ie滾動條樣式_ie瀏覽器沒有滾動條_瀏覽器右邊的滾動條無法下拉
          
let scrollTopVal = ref<number>(0);
let isScroll = ref<boolean>(false);

          

          方式
          

          onMounted(() => {
	// 監聽滾動條位置
	document.addEventListener("scroll", scrollTop, true);
	// 設置對應元素的滾動條
	let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
	// 判斷是否存在滾動條
	isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});
// 實時滾動條高度
const scrollTop = () => {
	nextTick(() => {
		let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
		scrollTopVal.value = elVal.scrollTop;
	});
};
onBeforeUnmount(() => {
	// 參數必須和掛載時保持一致
	document.removeEventListener('scroll', scrollTop, true);
});

          

          window方式
          

          onMounted(() => {
	// 監聽滾動條位置
	window.addEventListener('scroll', scrollTop, true);	
	let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
	isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});
// 實時滾動條高度
const scrollTop = () => {
	nextTick(() => {
		let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
		scrollTopVal.value = elVal.scrollTop;
	});
};
onBeforeUnmount(() => {
	// 參數必須和掛載時保持一致
	window.removeEventListener('scroll', scrollTop, true);
});

          

          3、解析
          

          1、獲取指定元素的滾動條值。在組件中需要通過class獲取，因為id是動態值。
          

          2、使用window方式時，只能檢測到body或頁面窗口的滾動條。然而對于的彈窗等組件獲取到的滾動條值為0。
          

          3、第三個參數表示深度監聽，在某些場景如果不設置第三個參數值為true，可能監聽不到對應的事件。
          

          4、第二個參數需要一個函數值，可以直接以函數的形式寫在里面，但是不推薦這樣寫。
          

          5、第一個參數便是對應的事件名稱，有滾動事件和鼠標事件等其他事件。
          

          6、必須銷毀scroll事件，因為是vue是單頁面應用，如果不銷毀，離開該頁面后事件依然會存在，影響瀏覽器的性能，并且在vue3中直接報錯。所以在離開此頁面之前應該銷毀全局監聽事件，可以在組件銷毀之前銷毀全局監聽事件。
          

          4、判斷是否存在滾動條
          

          判斷是否存在滾動條的需求，在彈窗插件中使用得較多。因為彈窗大多會添加: hidden;屬性，如果頁面超過一屏的話，添加這個屬性之后頁面會有晃動。
          

          為了增強用戶體驗，通過判斷是否有滾動條而添加margin-left屬性以抵消: hidden;之后的滾動條位置。
          

          判斷豎向滾動條
          

          console.log(el.scrollHeight > el.clientHeight);

          

          判斷橫向滾動條
          

          console.log(el.scrollWidth > el.clientWidth);

          

          特殊情況
          

          ie滾動條樣式_ie瀏覽器沒有滾動條_瀏覽器右邊的滾動條無法下拉
          

          當元素指定: hidden;時，不會出現滾動條。所以需要對元素是否應用了: hidden;進行判斷。
          

          function hasScrolled(ele, dir = "vertical") {
  // 判斷的方向是否設置了overflow: hidden;
  let style = window.getComputedStyle(ele);
  if (
    (dir == "vertical" && style.overflowY == "hidden") ||
    (dir == "horizontal" && style.overflowX == "hidden")
  )
    return false;
  // 在判斷完overflow不為hidden后，再通過兩個屬性來判斷。
  if (dir == "vertical") {
    return ele.scrollHeight > ele.clientHeight;
  } else {
    return ele.scrollWidth > ele.clientWidth;
  }
}

          

          但是，以上的方法不嚴謹，當容器產生外邊距合并的時候，也是ele. > ele.。
          

          <div class="box">
	<h1>子元素內部內容h1>
div>

          

          let box = document.querySelector(".box");
// scrollHeight: 63
console.log("scrollHeight: " + box.scrollHeight);
// clientHeight: 42
console.log("clientHeight: " + box.clientHeight);
// 是否有滾動條: true
console.log("是否有滾動條: ", box.scrollHeight > box.clientHeight);

          

          特殊情況較完美的處理方式
          

          function hasScrolled(ele, dir = "vertical") {
	let eleScroll = dir == "vertical" ? "scrollTop" : "scrollLeft";
	// 判斷scroll數值是否為0，還是其他值
	let result = !!ele[eleScroll];
	// 如果是其他數值(非0)這表示有滾動條
	// 如果是0，則嘗試移動一下滾動條，判斷是否能夠移動
	if (!result) {
		// 嘗試移動滾動條
		ele[eleScroll] = 1;
		// 再次確認數值
		result = !!ele[eleScroll];
		// 恢復原位
		ele[eleScroll] = 0;
	}	
	// 得出結果
	return result; 
}

          

          計算滾動條寬度的方法
          

          因為移動端瀏覽器的滾動條都是不占據頁面寬度的透明樣式，所以為了進一步增強用戶體驗，我們還需要計算滾動條的寬度，根據情況添加合理的margin-left值。
          

          新建一個帶有滾動條的div元素，再計算該元素和的差值。
          

          function getScrollbarWidth() {
	let scrollDiv = document.createElement("div");
	scrollDiv.style.cssText = "width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;";
	document.body.appendChild(scrollDiv);
	let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
	document.body.removeChild(scrollDiv);
	return scrollbarWidth;
}

          	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
无码福利一区二区三区|
色欲综合一区二区三区|
国产亚洲一区二区精品|
av一区二区三区人妻少妇|
精品欧洲AV无码一区二区男男|
久久国产精品免费一区|
日本免费一区二区久久人人澡|
国产一区二区三区在线观看精品|
久久精品国产一区二区三区
|
高清一区二区三区|
国产一区二区在线观看app|
亚洲国产国产综合一区首页|
国产福利一区二区三区在线视频|
欧美av色香蕉一区二区蜜桃小说
|
国产精品夜色一区二区三区|
国产电影一区二区|
亚洲AV无码一区二区三区在线观看|
日本美女一区二区三区|
成人区精品一区二区不卡|
在线播放国产一区二区三区
|
亚洲乱色熟女一区二区三区蜜臀|
日韩美一区二区三区|
国产无线乱码一区二三区
|
国产嫖妓一区二区三区无码|
国产精品污WWW一区二区三区|
骚片AV蜜桃精品一区|
国产视频一区二区在线观看|
中文字幕一区二区三|
无码精品国产一区二区三区免费
|
日韩久久精品一区二区三区|
激情综合一区二区三区|
国产免费一区二区三区VR|
国产成人精品一区二区三区免费|
亚洲精品色播一区二区|
久久久久人妻一区二区三区vr|
无码人妻精品一区二区蜜桃AV|
国产精品视频一区二区三区经|
国产精品日本一区二区不卡视频|
色欲AV无码一区二区三区|
尤物精品视频一区二区三区|
91在线一区二区|