scrollTop 是一個屬性，它表示元素的滾動內(nèi)容垂直滾動條的位置。對于可滾動元素，scrollTop 屬性返回垂直滾動條滾動的像素數(shù)，即元素頂部被隱藏的像素數(shù)。?
offsetTop 是一個屬性，用于獲取一個元素相對于其父元素的垂直偏移量（距離）。具體來說，返回的是一個元素的頂部邊緣相對于其 offsetParent 元素頂部邊緣的距離。
此時，有一個需求：如果目前在1440分辨率下，則會出現(xiàn)滾動條，希望點擊左邊的B時，右邊的B內(nèi)容區(qū)域可以向上移動到A內(nèi)容的位置上，同時B的標題內(nèi)容會有一個左右閃動顏色更換的效果。當點擊左邊菜單C時，右邊的C內(nèi)容區(qū)域可以向上移動，同時C的標題內(nèi)容會有一個左右閃動顏色更換的效果。但是要保證D內(nèi)容永遠在可視窗口的最下面。如下草圖所表示：（靜態(tài)圖片沒有左右閃動顏色更換的效果的草圖，將就看下）
?
handleSelect(val, item) {
this.activeIndex = val;
this.isActive = val;
// 獲取外部div
const contentDiv = this.$refs.content;
// 左邊4個菜單進行循環(huán)遍歷，對目前獲取的單塊區(qū)域遍歷，如果單塊區(qū)域的index+1=val,把外部div往上移動小div的父節(jié)點的距離
for (let i = val; i <= 4; i++) {
if (this.activeIndex == i) {
document.querySelectorAll(".title").forEach((dom, index) => {
if (index + 1 == val) {
contentDiv.scrollTop = dom.parentNode.offsetTop - 10
// 找到當下點擊的dom，拿到dom下的span即文字元素，加入了class閃動效果
const allChildren = dom.querySelector('span');
allChildren.classList.add('blinking-text')
setTimeout(() => {
// 移除閃動效果的類
allChildren.classList.remove('blinking-text');
}, 1000)
}
})
}
}
}
}?1.?document.querySelectorAll(".title").forEach((dom, index) => {...});：使用?querySelectorAll?方法獲取頁面上所有帶有?title?類（標題）的?div?元素，并使用?forEach?遍歷它們。index?是元素在數(shù)組中的索引值。
2.?if (index + 1 == val)：如果當前元素的索引值加 1 等于當前選中的菜單項的索引值?val，則執(zhí)行以下操作： 1.?contentDiv.scrollTop = dom.parentNode.offsetTop - 10;：將?content?區(qū)域的外部?div?元素的?scrollTop?屬性設(shè)置為當前元素父元素的?offsetTop?減去 10，以實現(xiàn)向上滾動的效果。
3.?const allChildren = dom.querySelector('span');：獲取當前元素下的所有?span?元素。
4.?allChildren.classList.add('blinking-text');給當前元素下的所有?span?元素添加名為?blinking-text?的類，以實現(xiàn)閃動效果。
5.setTimeout(() => {...}, 1000);使用?setTimeout?方法在 1 秒后執(zhí)行一個函數(shù)，該函數(shù)將移除?blinking-text?類
在css里面：
一：@keyframes 是 CSS 中用于創(chuàng)建動畫的規(guī)則。通過 @keyframes，您可以定義動畫的關(guān)鍵幀，即動畫在不同時間點的狀態(tài)。關(guān)鍵幀定義了動畫從開始到結(jié)束的狀態(tài)，以及中間經(jīng)過的中間狀態(tài)。
-
animationName?是動畫的名稱，您可以在?animation?屬性中引用它。 -
from?和?to?表示動畫的起始狀態(tài)和結(jié)束狀態(tài)。 - 可以使用百分比來表示動畫的中間狀態(tài)。
二：animation 是 CSS 中用于創(chuàng)建動畫效果的屬性。通過 animation 屬性，您可以將一個或多個 @keyframes 規(guī)則應(yīng)用于一個元素，從而在元素上創(chuàng)建動畫。animation 屬性允許您指定動畫的名稱、持續(xù)時間、緩動函數(shù)、延遲等。
基本語法如下：
animation: name duration timing-function delay iteration-count direction fill-mode;文章來源：http://www.zghlxwxcb.cn/news/detail-787793.html
具體解釋：文章來源地址http://www.zghlxwxcb.cn/news/detail-787793.html
name: 指定用于動畫的?@keyframes?的名稱，或者是?none（無動畫）。duration: 指定動畫的持續(xù)時間，可以是秒（s）或毫秒（ms）。timing-function: 指定動畫的緩動函數(shù)，控制動畫的速度變化。常見的值包括?ease、linear、ease-in、ease-out?等。delay: 指定動畫開始之前的延遲時間，可以是秒（s）或毫秒（ms）。iteration-count: 指定動畫的播放次數(shù)，可以是具體的次數(shù)（整數(shù)），也可以是?infinite（無限循環(huán)）。direction: 指定動畫的播放方向，可以是?normal（正常方向）、reverse（反向播放）、alternate（正反交替）等。fill-mode: 指定動畫在播放結(jié)束后的狀態(tài)，可以是?forwards（保持最后一個關(guān)鍵幀的狀態(tài)）、backwards（應(yīng)用第一個關(guān)鍵幀的狀態(tài)）等。
@keyframes blink {
0% {
opacity: 1;
color: #000;
}
25% {
transform: translateX(-6px);
}
/* 左抖動 */
50% {
opacity: 0;
color: #32B9AF;
}
/* 設(shè)置顏色變化 */
75% {
transform: translateX(6px);
}
/* 右抖動 */
100% {
opacity: 1;
color: #32B9AF;
animation-timing-function: ease-in-out;
}
/* 設(shè)置持續(xù)時間為2秒 */
}
.blinking-text {
animation: blink 0.3s infinite;
animation-iteration-count: 2;
}到了這里，關(guān)于scrollTop與offsetTop解決小分辨率區(qū)域塊向上滾動效果效果，結(jié)合animation與@keyframes實現(xiàn)標題左右閃動更換顏色效果。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
