jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法

文實例講述了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：

一、Js代碼：

onload = function () {

//初始化

scrollToLocation();

};

function scrollToLocation() {

var mainContainer = $('#thisMainPanel'),

scrollToContainer = mainContainer.find('.son-panel:last');//滾動到<div id="thisMainPanel">中類名為son-panel的最后一個div處

//scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滾動到<div id="thisMainPanel">中類名為son-panel的第六個處

//非動畫效果

//mainContainer.scrollTop(

// scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()

//);

//動畫效果

mainContainer.animate({

scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()

}, 2000);//2秒滑動到指定位置

}

二、Html代碼：

<div class="son-panel">我是類容區(qū)域-1</div>

<div class="son-panel">我是類容區(qū)域-2</div>

<div class="son-panel">我是類容區(qū)域-3</div>

<div class="son-panel">我是類容區(qū)域-4</div>

<div class="son-panel" style="height:160px;">我是類容區(qū)域-5</div>

<div class="son-panel">我是類容區(qū)域-6</div>

<div class="son-panel">我是類容區(qū)域-7</div>

<div class="son-panel">我是類容區(qū)域-8</div>

</div>

三. 相關(guān)知識

javascript中制作滾動代碼的常用屬性

1.網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;

網(wǎng)頁可見區(qū)域高： document.body.clientHeight;

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);

網(wǎng)頁正文全文寬： document.body.scrollWidth;

網(wǎng)頁正文全文高： document.body.scrollHeight;

網(wǎng)頁被卷去的高： document.body.scrollTop;

網(wǎng)頁被卷去的左： document.body.scrollLeft;

網(wǎng)頁正文部分上： window.screenTop;

網(wǎng)頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區(qū)高度： window.screen.availHeight;

2.假設(shè) obj 為某個 HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。

例如：

</div>

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。

“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

3.offsetTop 與 style.top 的區(qū)別

預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：

(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。

(2)offsetTop 只讀，而 style.top 可讀寫。

(3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

offsetWidth與style.width屬性的區(qū)別在于：如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.scrollLeft :

對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離．

即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離．

scrollTop

對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離．

即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．

文同步本人掘金平臺的原創(chuàng)翻譯：https://juejin.cn/post/6844903817968893960

DIVS該停止（濫用）了

我們喜歡（使用）<div>標簽。它們已經(jīng)存在了幾十年，這幾十年來，當需要將一些內(nèi)容包裹起來達到（添加）樣式或者布局目的的時候，它們成為首選元素。查看線上站點時，看到像下面這些內(nèi)容的情況依舊很常見：

<div class="container" id="header">
    <div class="header header-main">Super duper best blog ever</div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">
        Why you should buy more cheeses than you currently do
    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">
                Part 1: Variety is spicy
            </div>
            <!-- cheesy content -->
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
            <!-- more cheesy content -->
        </div>
    </div>
</div>
<div class="container" id="footer">
    Contact us!
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </p>
        <div class="street-address">
            <p>123 Main St., Suite 404</p>
            <p>Yourtown, AK, 12345</p>
            <p>United States of America</p>
        </div>
    </div>
</div>
復制代碼

Hoo，那有很多的div標簽。但是，它有效。我的意思主要是，它具有你需要的結(jié)構(gòu)。并且，我確定在你完成樣式添加之后，它看起來會像你想要的那個樣子。然而，它有些嚴重的問題：

可訪問性 - 許多a11y tools非常智能，會盡力解析頁面結(jié)構(gòu)，以幫助用戶按照頁面制作者的意圖來引導用戶，并為用戶提供簡單的跳轉(zhuǎn)鏈接來指引他們到自己關(guān)心的頁面部分。然而，<div>標簽并沒有真正傳遞有關(guān)文檔結(jié)構(gòu)的任何有用信息。世界上最聰明的a11y tool仍然不是人類，不能指望其解析class和id屬性，或能夠識別全世界開發(fā)人員命名塊元素的奇怪和狂野的方式。我可以識別到class="article-header-level-2"是一個副標題，但是機器不能。（如果可以的話，把它從我電腦中拿出來，可我也還沒準備好進行AGI革命呢。）
可讀性 - 要閱讀此代碼，你需要仔細掃描類名，從<div class="..."></div>樣板之間挑選出來。一旦你（的代碼）深入幾個層次，跟蹤哪個</div>結(jié)束標記與哪個<div ...>開始標記對應，那就變得很棘手了。你開始非常依賴IDE功能，例如著色不同的縮進級別或突出顯示匹配的標記以跟蹤您的位置，而在較長的文檔中，它可能需要在這些功能之上進行大量的滾動。
一致性和標準 - 開始新的工作或轉(zhuǎn)移到新項目，并且必須從頭學習代碼庫中使用的讓人抓狂的標記，那可能會令人很沮喪。如果每個人都有標準化的方法來標記web文檔中常見結(jié)構(gòu)，那么在不熟悉代碼庫的情況下，都可以很容易的瀏覽HTML文件并快速處理它應該展示的內(nèi)容。如果只有一個這樣的標準...

HTML5: 這個標準

HTML5并不新奇。這是輕描淡寫；最初的工作草稿于2008年1月（11年前）發(fā)布，以征求公眾意見，并于4年半前，2014年10月份成為一個全面W3C的推薦。所以，就像它已經(jīng)存在了一段時間。

HTML5的主要進步之一是引入了一組標準化的語義元素。術(shù)語“語義”指的是單詞或事物的含義，因此”語義元素“是用于以更有意義的方式標記文檔結(jié)構(gòu)的元素，這種方式可以清楚地表明它們的用途和它們在文件中服務的目的是什么。而且重要的是，由于它們是標準化的，定義文檔的這些元素可以被每個人使用并理解，包括機器人。

我認為HTML5規(guī)范本身在<div>元素定義下的一個注釋中很好地總結(jié)了這個問題：

注釋：強烈建議作者將div元素視為最后采取的元素，在沒有其它元素適合的（情況下）。使用更合適的元素而不是div元素可以使讀者更容易訪問，并且更容易為作者提供可維護性。-- www.w3.org/TR/html5/gr…

我將語義塊元素分為兩類：主要結(jié)構(gòu)和內(nèi)容指標。這些不是標準的條款或者其它條款；我在這篇文章中做了一些（區(qū)分）。但我認為這種區(qū)分足夠有用。?♂?

主要結(jié)構(gòu)

有一個超級常見的模式，可在互聯(lián)網(wǎng)上的網(wǎng)站，教程甚至CSS庫中找到，并且有充分的理由。我們經(jīng)常將最頂層的頁面劃分為三個區(qū)域：頁眉、主頁和頁腳，然后根據(jù)需要將這些區(qū)域劃分為多個區(qū)域。我在上面的例子中包含了這個來證明這點：

<div class="container" id="header">...</div>
<div class="container" id="main">
    ...
    <div class="article-section">...</div>
    ...
</div>
<div class="container" id="footer">...</div>
復制代碼

我已經(jīng)看過（并且使用過）這種模式很久了，以這種方式構(gòu)造文檔非常有意義，既可以讀取HTML，又可以更加簡單地在CSS中設(shè)置頁面樣式。頁眉和頁腳元素頁可以使用PHP或Rails/ERB等語言中的部分模版來更易于使用，因為你可以在整個站點中包含常見的頁眉和頁腳部分：

<?php include 'header.php'; ?>

<div id="main">...</div>

<?php include 'header.php'; ?>
復制代碼

所以這就是事情：每個人都認為這是一個很好的模式。這包括WHATWG和W3C的人員，他們將模式標準化為HTML5中的四個新元素，名稱非常清晰：<header>, <main>, <footer>和<section>。

Bookends: <header> 和 <footer>

<header> 和 <footer>元素基本上是雙胞胎：它們在規(guī)范中的定義非常相似，并遵循相同的規(guī)則，關(guān)于它們被允許使用的位置，唯一區(qū)別在于它們的語義目的：頁眉在事物的前面，頁腳在事物的末尾。對于事物，我的意思不僅僅是頁面的：這對元素的設(shè)計用于文檔的任何部分，代表一大塊內(nèi)容，具有明確的開頭和結(jié)尾。這可以包括表格，文章，文章部分，社交媒體網(wǎng)站上的帖子，卡片等。

頁眉和頁腳在語義上接近sectioning root或sectioning content元素。像<body>, <blockquote>, <section>, <td>,<aside>等許多其它元素；如果你想了解完整的列表，就點擊上面的鏈接。輔助技術(shù)可以使用這些元素和其它元素生成文檔大綱，這可以幫助用戶更輕松的訪問它。在每個sectioning root/content中，你不應該使用超過一個的<header>或<footer>。（一個就好，不能兩個相同）

作為最后說明，<header>經(jīng)常作為其上下文保存標題元素（<h1>-<h6>）。這不是必須的，但可以幫助將其它相關(guān)元素與標題分組，比如鏈接，圖片或子標題，并且可以維持一直的結(jié)構(gòu)，即使標題是<header>中的唯一元素。

好東西：<main>

第三個主要區(qū)域元素--<main>很特別。規(guī)范中說明了關(guān)于<main>的兩個非常重要的內(nèi)容：

文檔的主要內(nèi)容區(qū)域包括文檔的特定內(nèi)容，且不包括在一組文檔中重復的內(nèi)容，例如站點導航鏈接，版本信息，站點的徽標，橫幅和搜索表單（除非文檔或應用的主功能是一種搜索形式）-- www.w3.org/TR/html5/gr…

所以，<main>是你放置好東西的區(qū)域，是頁面的重要部分，特別是用戶訪問此頁面的原因（或說目的），而不是您的站點。換句話來說，主要內(nèi)容。

所有其它東西，徽標、搜索表單和導航欄等都可以在<body>中的<header>或<footer>中，但是在<main>之外。

文檔中不能有多個可見的main元素。如果文檔中存在多個main元素，則必須使用隱藏屬性隱藏所有其它（main）實例。 -- www.w3.org/TR/html5/gr…

這很獨特。和<header>和<footer>（以及其它塊元素不同），<main>不能在任意切片內(nèi)容的整個頁面中使用；它應該只被使用一次?；蛘吒_切地說，它可以在文檔中多次被使用，但是一次只能看到一個<main>元素，所有其它的（

）必須被使用隱藏屬性隱藏，如CSS中的display:none。如果您思考下，（你會明白）這在應用程序中預加載視圖是種很有用的模式：創(chuàng)建一個新的<mian hidden>，獲取用戶可能接下來查看的一些內(nèi)容（例如：系列文中的下一篇，下一張幻燈圖放映等），然后，當用戶點擊鏈接/按鈕加載該視圖時，通過在兩者上切換隱藏屬性，將當前的<main>切換到預加載的（那個）。

在繼續(xù)之前，我們暫停下并查看上面的示例。如果我們使用<header>，<main>和<footer>作為文章的主要結(jié)構(gòu)，它的外觀如下：

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
復制代碼

那真的很棒！但是，還有很多工作要做。

分解：<section>

因此，我們?yōu)轫撁嫣峁┝艘粋€基本大綱：頁眉，頁腳和主要內(nèi)容區(qū)域?，F(xiàn)在是時候添加些美妙的內(nèi)容了。

通常，你會希望將你的內(nèi)容分解為多個部分，尤其是對像本文這樣的大量文本內(nèi)容，因為沒人喜歡閱讀這些難以理解的文本墻。

<section>派上用場了。這是在系列規(guī)則中最簡單的一個：從結(jié)構(gòu)上講，它基本上只是一個具有特殊含義的<div>。一個<section>開始一個新的"sectioning content"區(qū)域，因此它可以有自己的<header>和<footer>。

那么，<section>和普通的舊<div>之間有什么區(qū)別，然后，你應該在什么時候使用它們呢？好吧，允許我再次引用規(guī)范：

筆記：
元素不是通用容器元素。當一個元素僅是用于樣式目的或為腳本編寫提供便利的時候，鼓勵作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般規(guī)則是元素僅在元素內(nèi)容在文本[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)

你知道，概述來說，HTML5規(guī)范實際上是可讀的。它是那個比較可讀的規(guī)范之一。每當我瀏覽它以獲取快速答復時，我都不可避免地學到一些意想不到的和有用的東西，尤其是當我開始點擊鏈接的時候。有時（你也）試試吧！

簡而言之，如果要在目錄中列出文檔的一部分，請使用<section>。如果沒有，請使用<div>或其它元素。

內(nèi)容指標

很好，我們已經(jīng)得到了一個堅固的頁面結(jié)構(gòu)。我們已經(jīng)明確標記了頁面的主要內(nèi)容區(qū)域，而不僅僅是單獨調(diào)整<div>，我們已經(jīng)調(diào)整出了頁眉，頁腳和章節(jié)。但是，肯定還有比我們的文檔更多的語義。

讓我們來談談HTML5中添加的一些元素，它們傳達的內(nèi)容語義而不是結(jié)構(gòu)。

整體：<article>

<article>元素用于表示完全獨立的內(nèi)容區(qū)域，這些內(nèi)容可以從頁面中提取出來并放入另一個內(nèi)容中，并且仍然有意義。這可能是文字文章或博客，但也可用于社交媒體帖子，如推特或臉書的墻貼。

HTML5規(guī)范建議文章總有一個標題，標識它是什么，理想的情況下使用標題元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它來嵌入一個完整的文檔片段，其中包含其它頁面中所需的所有結(jié)構(gòu)。

從上面的方式返回到示例，我們使用<article>和我們討論的其它一些元素來重寫帶class="article-*"的元素。

<article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
復制代碼

這不是比原來更具可讀性嗎？而且，不僅更容易閱讀，它對輔助技術(shù)更有用；機器人不能總是弄清楚你的特定類名模式，但是它們可以遵循這種結(jié)構(gòu)。

使用：<nav>

這個元素比其它元素更有名。<nav>旨在清楚地識別頁面上的主要導航塊，幫助用戶圍繞站點其余部分找到路徑的鏈接組（例如站點地圖或標題中的鏈接列表）或當前頁面（例如目錄）。

在我們的示例頂部，讓我們將<nav>應用于標題中的那組鏈接。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>
復制代碼

根本不改變結(jié)構(gòu)，但你知道它是什么，一目了然而不需要在<div>上讀物和處理類名來找到它，更重要的是機器人也可以找到它。

接觸：<address>

我們要討論的最后一個元素是<address>。這個元素旨在調(diào)出聯(lián)系信息，它通常在主頁<footer>中用于標記企業(yè)的郵寄地址，電話號碼，客戶服務郵箱地址等等。

有趣的是，如何在<address>元素中標記內(nèi)容的規(guī)則是開放的。規(guī)范提到有幾個其它規(guī)范可以解決這個問題，并且提供這種級別的粒度可能超出了HTML本身的范圍。

常見的解決方案是RDFa，也是W3C規(guī)范，它使用標簽上的屬性來標記數(shù)據(jù)的不同組件。下面是我們示例中的頁腳在標記<address>元素和RDFa時可能看起來的樣子：

<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
復制代碼

無疑，RDFa有點冗長，但它對于標記數(shù)據(jù)非常方便。如果你有興趣了解有關(guān)RDFa的更多信息，請點擊以下鏈接：

The W3C's RDFa primer
A description of schemas and links to a bunch of them on schema.org
The LocalBusiness schema used above

總結(jié)

好了，我們已經(jīng)介紹了很多，我們已經(jīng)看到很多零零散散的元素應用到我們的例子中。那么，讓我們把它們放在一起看看它的樣子。

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
復制代碼

如果你問我（怎么看改造后的內(nèi)容？），那這比原始例子的可讀性高100倍，而且對于搜索引擎優(yōu)化和可訪問性目的而言，其效率將提高100倍。

這些絕不是HTML中唯一的語義元素。有很多其它元素可以幫助你標記和構(gòu)建你的文本內(nèi)容，嵌入媒體資源等等。如果你喜歡這個并且希望深入挖掘，這里有一些（標簽）可以查看下。你可能認識一些：

<aside>
<blockquote>
<cite>
code
<data>
<del>
<figure>
<ins>
<time>
<var>

這只是一個開始！就像我說的，當你開始閱讀HTML規(guī)范時，很難停下來。它是種非常豐富的語言，我認為人們經(jīng)常會低估這種語言。

日常開發(fā)中，我們經(jīng)常會遇到一些因為布局限制而無法完全展示的內(nèi)容，這個時候，我們就需要讓內(nèi)容自己滾動來解決這個問題。

第一種情況：文本內(nèi)容滾動

1.html部分

<div class="scroll-box">
    <p class="scroll-content-item">
      <!-- 此處可以放置需要滾動的內(nèi)容-->

    </p>
</div>

2.CSS部分

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*當內(nèi)容超過，出現(xiàn)滾動條*/
}
.scroll-content-item{
  color: #FFFFFF;
  font-size: 16px;
  animation: run 15s 1s linear infinite;
}
.ns-title{
  color: #33ffca;
  font-size: 14px;
  font-weight: bold;
}
.ns-content{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 35px;
  font-weight: 400;
}
@keyframes run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
20% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

95% {
    -webkit-transform: translate3d(0, -350px, 0);
    transform: translate3d(0, -350px, 0);
}
100% {
  -webkit-transform: translate3d(0, -350px, 0);
  transform: translate3d(0, -350px, 0);
}
}

3.示例：

          <!-- 創(chuàng)建外部展示容器 -->
          <div class="scroll-box">
            <p class="scroll-content-item">
              <span class="ns-title">（一）查苗補種。</span>
              <span class="ns-content"
                >小麥出苗后要及時查苗，出現(xiàn)缺苗斷壟的地方，開溝補種。</span
              >
            <br>
              <span class="ns-title">（二）因地因苗適時鎮(zhèn)壓。</span>
              <span class="ns-content"
                >對于丘陵、山區(qū)部分播種偏早、播量偏大的冬前可能旺長麥田，要及時進行深中耕斷根或鎮(zhèn)壓，控旺轉(zhuǎn)壯。</span
              >
              <br>
              <span class="ns-title">（三）化學除草及防控病蟲。</span>
              <span class="ns-content"
                >要根據(jù)苗情、冬前氣溫情況和麥田草害發(fā)生種類，選準對路農(nóng)藥，適時開展化學除草。</span
              >
              <br>
              <span class="ns-title">（四）看墑適時節(jié)水冬灌。</span>
              <span class="ns-content"
                >要根據(jù)天氣條件、整地質(zhì)量、小麥苗情和土壤墑情合理確定是否進行冬灌。</span
              >
              <br>
              <span class="ns-title">（五）科學防災減災。</span>
              <span class="ns-content"
                >由于今年晚播面積大，冬前弱苗占比高，要注意及早做好小麥防凍準備，一旦凍害發(fā)生，要分苗情、分災情、分區(qū)域及時采取早春追肥澆水等補救措施有效應對，把損失降到最低。
              </span>
            </p>
          </div>

<style>

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*當內(nèi)容超過，出現(xiàn)滾動條*/
}
.scroll-content-item{
  color: #FFFFFF;
  font-size: 16px;
  animation: run 15s 1s linear infinite;
}
.ns-title{
  color: #33ffca;
  font-size: 14px;
  font-weight: bold;
}
.ns-content{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 35px;
  font-weight: 400;
}
@keyframes run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
20% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

95% {
    -webkit-transform: translate3d(0, -350px, 0);
    transform: translate3d(0, -350px, 0);
}
100% {
  -webkit-transform: translate3d(0, -350px, 0);
  transform: translate3d(0, -350px, 0);
}
}
</style>

第二種情況：列表循環(huán)滾動

vue-seamless-scroll插件的使用教程在這里，注意區(qū)分vue2和Vue3版本

在線咨詢

上一篇：別找了，Html網(wǎng)頁自動跳轉(zhuǎn)頁面代碼全在這里了
下一篇：元旦，年會抽獎模板頁面送給你

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商