0%

笔记

Posted on

git pull是git fetch和git merge两个步骤的结合

vscode 的 sync 等于下面

1
2
git pull origin someBranch
git push origin someBranch

  • ~ 选择器的 相反的 “previous sibling” selector ?

几个思路：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}
1
2
3
4
5
6
7
<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

flex order 或者 row-reverse 。 DOM 在后但显示“在前”。

1
ul li:nth-child(-n+2)

via https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector

via https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/

IntersectionObserver 是否可见

1
2
3
4
5
6
7
8
9
10
11
12
13
var io = new IntersectionObserver(callback, option);

// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

io.observe(elementA);
io.observe(elementB);

lazy load

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(changes) {
    changes.forEach(function(change) {
      var container = change.target;
      var content = container.querySelector('template').content;
      container.appendChild(content);
      observer.unobserve(container);
    });
  }
);

query('.lazy-loaded').forEach(function (item) {
  observer.observe(item);
});

无限滚动（infinite scroll）

1
2
3
4
5
6
7
8
9
10
11
12
var intersectionObserver = new IntersectionObserver(
  function (entries) {
    // 如果不可见，就返回
    if (entries[0].intersectionRatio <= 0) return;
    loadItems(10);
    console.log('Loaded new items');
  });

// 开始观察
intersectionObserver.observe(
  document.querySelector('.scrollerFooter')
);

ResizeObserver

观测 resize

scrollIntoView 到中间

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

scrollIntoView()

默认是

scrollIntoView(true)

也就是

scrollIntoView({block: “start”, inline: “nearest”})

false 是

scrollIntoView({block: “end”, inline: “nearest”})

参数

behavior Optional

Defines the transition animation. One of auto or smooth. Defaults to auto.

block Optional

Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.

inline Optional

Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest.

tab 尽量靠中间

1
2
3
4
5
6
7
obj.scrollIntoView(
  {
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
  }
)

16:9 固定比例的 iframe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

class add active

1
2
3
4
5
6
7
8
9
10
11
12
13
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}

Get Element in Iframe

1
2
3
var iframe = document.getElementById("myFrame");
var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];
elmnt.style.display = "none";

Media Queries with JavaScrip

1
2
3
4
5
6
7
8
9
10
11
function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<defs>
  <linearGradient
    id="grad1"
    x1="0%"
    y1="0%"
    x2="100%"
    y2="0%"
  >
    <stop
      offset="0%"
      style="stop-color:#8095F0;stop-opacity:1"
    />
    <stop
      offset="100%"
      style="stop-color:#51FCB5;stop-opacity:1"
    />
  </linearGradient>
</defs>