scrollIntoView块与内联 [英] scrollIntoView block vs inline

问题描述

我注意到 scrollIntoView 有一些新选项。

I noticed scrollIntoView has some new options since last I looked.

即阻止和内联。这两者有什么区别？我猜测 {block：start} 将元素的顶部与页面顶部对齐，但我不是确定与内联有什么不同，或者你如何同时使用这两个选项？

Namely, block and inline. What's the difference between these two? I'm guessing {block: "start"} will align the top of the element with the top of the page, but I'm not sure how that would be different from inline, or how you would use both these options simultaneously?

推荐答案

块选项决定元素在其可滚动祖先的可见区域内垂直对齐的位置：

The block option decides where the element will be vertically aligned inside the visible area of its scrollable ancestor:

• 使用 {block：start} ，元素在其祖先的顶部对齐。


• 使用 {block：center} ，元素在其祖先的中间对齐。


• 使用 {block：end} ，元素在其祖先的底部对齐。


• 使用 {block：nearest} ，元素：
  
  
  
  
  • 如果你现在在它的祖先顶部对齐
  
  
  • 如果您目前位于其祖先的底部，则会对齐它它。
  
  
  • 保持投放，如果它已经在视野中。
  
  
  • Using {block: "start"}, the element is aligned at the top of its ancestor.
  • Using {block: "center"}, the element is aligned at the middle of its ancestor.
  • Using {block: "end"}, the element is aligned at the bottom of its ancestor.
  • Using {block: "nearest"}, the element:
    • is aligned at the top of its ancestor if you're currently below it.
    • is aligned at the bottom of its ancestor if you're currently above it.
    • stays put, if it's already in view.

    inline 选项决定元素在其可滚动祖先的可见区域内水平对齐的位置：

    The inline option decides where the element will be horizontally aligned inside the visible area of its scrollable ancestor:

    
    
    • 使用 {inline：start} ，元素在其祖先的左侧对齐。
    
    
    • 使用 {inline：center} ，元素在其祖先的中心对齐。
    
    
    • 使用 {inline：end} ，元素在其祖先的右侧对齐。
    
    
    • 使用 {inline：nearest} ，元素：
      
      
      
      
      • 如果你当前在它的祖先左边对齐在它的右边。
      
      
      • 如果你当前在它的左边，则在它的祖先右边对齐。
      
      
      • 保持放置，如果它已经在查看。
      
      
      • Using {inline: "start"}, the element is aligned at the left of its ancestor.
      • Using {inline: "center"}, the element is aligned at the centre of its ancestor.
      • Using {inline: "end"}, the element is aligned at the right of its ancestor.
      • Using {inline: "nearest"}, the element:
        • is aligned at the left of its ancestor if you're currently on its right.
        • is aligned at the right of its ancestor if you're currently on its left.
        • stays put, if it's already in view.

        两个块和内联可以同时使用滚动到一个动作中的指定点。

        Both block and inline can be used at the same time to scroll to a specified point in one motion.

        查看以下代码段，了解每个动作的实际效果。

        Check out the following snippet to see how each works in action.

        代码段

        /* ----- JavaScript ----- */
        var buttons = document.querySelectorAll(".btn");
        
        [].forEach.call(buttons, function (button) {
          button.onclick = function () {
            var where = this.dataset.where.split("-");
            document.querySelector("div#a1").scrollIntoView({
              behavior: "smooth",
              block: where[0],
              inline: where[1]
            });
          };
        });

        /* ----- CSS ----- */
        body {
          padding: 500px;
          width: 2000px;
        }
        
        header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100;
        }
        
        div#a1 {
          width: 1000px;
          height: 300px;
          background: url(//www.w3schools.com/css/trolltunga.jpg);
          background-repeat: no-repeat;
        }

        <!----- HTML ----->
        <header>
          <button class="btn" data-where="start-start">T-L</button>
          <button class="btn" data-where="start-center">T-C</button>
          <button class="btn" data-where="start-end">T-R</button>
          <button class="btn" data-where="center-start">C-L</button>
          <button class="btn" data-where="center-center">C-C</button>
          <button class="btn" data-where="center-end">C-R</button>
          <button class="btn" data-where="end-start">B-L</button>
          <button class="btn" data-where="end-center">B-C</button>
          <button class="btn" data-where="end-end">B-R</button>
        </header>
        
        <div id = "a1"></div>

        这篇关于scrollIntoView块与内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！