記事ディレクトリ

序文
1. JavaScriptは指定した位置までアニメーション付きでスクロールします
2. jQueryは指定した位置までアニメーション付きでスクロールします
3: Vue がアニメーション付きで指定した位置までスクロールします
要約する
補足 -scrollIntoView
- 1: 機能
- 2: 使用する

序文

需求：移动端商品列表中有10个数据，默认展示5个，希望点击更多商品的时候，展示的最后一个自动滚动到最上面
これは主に、js と jq がスクロールボックスを使用するときに遭遇する落とし穴を要約するものです。

这里是基本html和css结构，以下的都根据这个来

<div id="father">
    <div id="son">
      11111111111111111111111122222222222222222222222222222223333333333333333333333333334444444444444444444444444444444555555555555555555555555555556666666666666666666777777777777777777
    </div>
  </div>
  <button id="btn" onclick="myBtn()">点我滚动</button>

/* css代码 */
#father{
    
    
  width: 100px;
  height: 200px;
  background-color: skyblue;
  overflow: auto;
}
#son{
    
    
  width: 100px;
  background-color: pink;
  word-break: break-all;
}

知識ポイント 1: word-break可以设置盒子内容超出盒子自动撑开
word-break:normal|break-all|keep-all;
Normal は、ブラウザのデフォルトの改行ルールを使用することを意味します。
ブレークオールとは、単語内で改行を許可することを意味します。
keep-all は、半角スペースまたはハイフンのみを分割できることを意味します。

1. JavaScriptは指定した位置までアニメーション付きでスクロールします

1: ボックスを指定した位置までスクロールするにはどうすればよいですか? (スクロールトップとスクロール左)

3 つの主要な JavaScript ファミリのうちスクロールファミリを知っている人なら、スクロール位置を取得および設定するための構文が次のとおりであることを知っています。

スクロール位置の取得: element.scrollTop
スクロール位置の設定: element.scrollTop = value

その通りなのですが、あまり使っていない時に大きな落とし穴を踏んでしまいました。コードを直接見てください。！！！！！！！

const father = document.getElementById('father');
const son = document.getElementById('son');
const btn = document.getElementById('btn');
// 按钮的点击事件
function myBtn(){
    
    
  console.log('我被点击了',son.scrollTop);
  // son.scrollTop  = 150; // 没效果
  father.scrollTop  = 150; // 点击按钮后滚动到3的位置，如下图
}

ここに画像の説明を挿入
上図のように、ボタンをクリックした後、子要素の.scrollTopでスクロール位置を設定しても効果はなく、親要素でscrollTopの値を設定してスクロールの効果を持たせるため、準備としてはスクロール位置を取得して変更するのが正しいはずです父元素.scrollTop。ずっと転がすサブボックスだと思っていましたが、ついにデモ機でテストしてみました。。。。。。

2. JavaScriptのscrollToメソッドを理解する

mdn のscrollToメソッドの詳細な説明: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo

(1) 機能

要素のscrollTo()メソッドは、インターフェイスを指定された要素の指定された座標位置にスクロールさせることができます。

(2) 文法

element.scrollTo(x-coord, y-coord)
element.scrollTo(options)

(3)パラメータ

x 座標は、水平軸上の要素の左上隅からのピクセル単位の希望のスクロール位置です。
y 座標は、要素の左上隅からの垂直軸上の希望のスクロール位置 (ピクセル単位) です。
options は ScrollToOptions オブジェクトです。

(4) 使用

const father = document.getElementById('father');
const son = document.getElementById('son');
const btn = document.getElementById('btn');
function myBtn(){
    
    
   // 设置盒子滚动的值
  // father.scrollTop  = 150;
  // scrollTo方式一:
  father.scrollTo(0, 150); // x轴不滚动，y轴滚动150px
  // scrollTo方式二:
  father.scrollTo({
    
    left: 150, behavior: 'smooth'}); // x轴平滑滚动150px
  father.scrollTo({
    
    top: 150, behavior: 'smooth'}); // y轴平滑滚动150px
  father.scrollTo({
    
    top: 15, left: 150, behavior: 'smooth'}); // x轴平滑滚动15px，y轴平滑滚动150px
}

知識ポイント2: ビヘイビアの値は、直接ジャンプする場合はauto、スムーズに進む場合はsmoothを選択できます

3. JavaScriptでscrollTopをremとして指定した位置に設定する方法

3.1 アイデア

ご存知のとおり、js では、scrollTop によって設定される値にはコードが含まれていないため、rem を直接使用して位置を変更することはできません。font-size の値が 16 の場合、1rem は 16px です。ここではhtmlのfont-sizeの値を直接取得し、文字列を切り取ってpxの単位を取り除いていますが、ここでは各商品が32px、1商品が2rem、つまり5商品目に移動すると8remと仮定して、以下のコードを取得します。

const father = document.getElementById('father');
let htmlFontSize = document.documentElement.style.fontSize.replace('px',''); // html的font-seze的值
document.getElementById('father').scrollTo({
    
    top: htmlFontSize * 8, behavior: 'smooth'}); // 滚动4个商品的距离，看到的就是第五个了

3.2. 補足: 上記のコードで font-size の値が取得できない場合、または値が空の場合は、次の方法を使用してください。

知識ポイント 3
(0) アドレス: mdn の window.getComputedStyle メソッド: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
(1) 機能: アクティブなスタイルシートを適用し、これらの値に含まれる基本的な計算を解析した後、要素のすべての CSS プロパティの値を報告するオブジェクトを返します。プライベート CSS プロパティ値には、オブジェクトによって提供される API を介してアクセスするか、CSS プロパティ名を使用してインデックスを作成するだけでアクセスできます。
(2) 構文: document.defaultView.getComputedStyle(element[,pseudo-element]);
window.getComputedStyle(element[,pseudo-element]);
(3) パラメータ 1: element (必須) は、計算されたスタイルの要素を取得するために使用されます。
パラメータ 2: pseudoElt (オプション) 照合する疑似要素の文字列を指定します。通常の要素の場合は省略 (または null) する必要があります。

したがって、window.getComputedStyle メソッドを使用して html の font-seze 値を取得できます。

const father = document.getElementById('father');
let htmlFontSize = getComputedStyle(window.document.documentElement)['font-size'].replace('px',''); // html的font-seze的值
document.getElementById('father').scrollTo({
    
    top: htmlFontSize * 8, behavior: 'smooth'}); // 滚动4个商品的距离，看到的就是第五个了

4. 上記すべての JavaScript のコード集

const father = document.getElementById('father');
const son = document.getElementById('son');
const btn = document.getElementById('btn');
function myBtn(){
    
    
  // 设置盒子滚动的值
  // father.scrollTop  = 150;

  // scrollTo方式一:
  // father.scrollTo(0, 150); // x轴不滚动，y轴滚动150px
  
  // scrollTo方式二:   behavior的值可选  auto为直接跳到，smooth为平滑进行
  // father.scrollTo({left: 150, behavior: 'smooth'}); // x轴平滑滚动150px
  // father.scrollTo({top: 150, behavior: 'smooth'}); // y轴平滑滚动150px
  // father.scrollTo({top: 15, left: 150, behavior: 'smooth'}); // x轴平滑滚动15px，y轴平滑滚动150px
}
//onscroll事件的处理函数
// son.onscroll = function readScrollTop() {
    
    
//   console.log('scrollTop:', outEle.scrollTop); // 可以清楚的看到滚动的距离
// }
// document.getElementById('son').scrollTo({top: 170, behavior: 'smooth'}); // 滚动大概3个渠道的距离
let htmlFontSize = document.documentElement.style.fontSize.replace('px',''); // html的font-seze的值
document.getElementById('father').scrollTo({
    
    top: htmlFontSize * 8, behavior: 'smooth'}); // 滚动4个商品的距离，看到的就是第五个了

2. jQueryは指定した位置までアニメーション付きでスクロールします

上記は非常に詳細ですが、jq の構文が異なりますので、簡単にメモします。

1.$(document).ready() と window.onload

（1）onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载。
（2）$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行，所以，使用document.ready()方法的执行速度比onload()的方法要快。
なぜこの突然の言及があるのでしょうか？jqコードを書くので、ここに書かないと効果がありません。jqのscrollTopサンプルを読んだ後に気づきました。
ここに画像の説明を挿入

テストアドレス: https://www.runoob.com/try/try.php?filename=tryjquery_css_scrolltop_get

2. jQueryのanimateメソッド

上記の w3c は非常に詳細なので、ここでは大騒ぎしませんが、w3c の jquery の animate メソッドはコード内で直接使用できます。

$('#father').animate({
    
    
   scrollTop: 150  // 这里也可以是scrollLeft，也就是修改侧轴的位置
}, 500); // 500 为滑动事件，可以修改，单位是ms

3. jQuery は、scrollTop の値を指定された位置に設定します。

これは1.3のJavaScriptでscrollTopを指定位置に設定するのと同じで、値はremです。

let htmlFontSize = getComputedStyle(window.document.documentElement)['font-size'].replace('px',''); // html的font-seze的值
$('#channel_list').animate({
    
    
  scrollTop: htmlFontSize * 8    // 这里就是使用rem设置scrollTop的值了
}, 500);

3: Vue がアニメーション付きで指定した位置までスクロールします

実際、JavaScript も使用できますし、vue も使用できます。これらはすべて、scrollTo メソッドを使用します。主に ref の使用について説明します。

parent.scrollTo(x, y);  // 注意，是父盒子.scrollTo
this.$refs.parent.scrollTo(0, 300); // ref的使用（注意：需要设置ref才能使用）

注: dom 要素と scrooTo メソッドが正しく使用されていることがわかっている場合は、メソッドを nextTick に配置できます。

要約する

上記は、JavaScript と jQuery でのscrollTopの基本的な使用法、アニメーションでのscrollTopの使用法、およびscrollLeftが同様に使用されるscrollTopの値を変更するためのremの使用法をまとめています。

補足 -scrollIntoView

1: 機能

只能滚动顶部底部中间，无法滚动到指定位置。

2: 使用する

// javascript
父元素.scrollIntoView(); //顶部
父元素.scrollIntoView(false); //底部
父元素.scrollIntoView({
    
     behavior: "smooth", block: 'center' }); /中间
// vue 
this.$refs.父元素Ref.scrollIntoView({
    
     behavior: "smooth", block: 'center' });  ref的使用（注意：需要设置ref才能使用）

動作はscrollInToメソッドと同じです。autoは直接ジャンプすることを意味し、smoothはスムーズに進むことを意味します

jQuery、JavaScript、および vue は、scrollTop の値を指定された位置に設定するなど、子ボックスを親ボックスの指定された位置までスクロールさせます。