小编Hey*_*rco的帖子
Javascript：scrollIntoView（）与scrollIntoViewIfNeeded（）
scrollIntoView()有人知道vs之间有什么区别吗scrollIntoViewIfNeeded()？
我没有看到他们之间的差异。如果元素不在可见区域中，它们都会滚动；如果元素已经可见，则它们不执行任何操作。
推荐指数
解决办法
查看次数
使用 CSS 网格创建导航栏
我正在创建一个用 CSS 网格制作的导航栏。
我决定用网格来制作它，这样我就可以在不修改html 的情况下重新排列部分（项目）（只需修改 CSS）。
然后我创建了包含 3 个区域的网格：徽标、菜单、切换器。
我添加了一点间隙，这样每个项目就不会粘在一起。
到目前为止一切顺利，直到我试图删除一个/某些部分，即使该部分消失了，差距仍然存在。
然后我尝试消除间隙并替换为每个部分的边距。但是边距不会在网格的开始/结束处崩溃。它的行为与常规块元素不同。
我知道使用 flexbox 而不是网格更实用，但我更喜欢网格，因为可以在不修改 html 的情况下重新排列该部分。可以将徽标移动到顶部或其他位置。flex 是不可能的事情。
谁能解决我的网格间隙问题？或者您可能有不同的方法来创建导航栏？
查看我的沙箱：
.navbar {
background: pink;
display: grid;
grid-template-rows: auto;
grid-template-columns: max-content auto max-content;
grid-template-areas: "logo menus toggler";
justify-items: stretch;
align-items: stretch;
column-gap: 20px;
}
.logo {
background: green;
grid-area: logo;
width: 60px;
}
.menus {
background: lightsalmon;
grid-area: menus;
display: flex;
flex-direction: row;
justify-content: start;
}
.menus * {
padding: …推荐指数
解决办法
查看次数
Javascript ResizeObserver 意外触发
为什么ResizeObserver类总是首先执行处理程序observe()？
尝试在 Chrome 的开发工具上执行以下代码：
(new ResizeObserver(() => console.log('resize detected'))).observe($0)
即使您没有进行任何尺寸更改，应用后您也会立即看到打印的日志。
我需要只在调整大小时执行处理程序的调整大小观察器。
有没有任何黑客/选项来调整它？
let disableObserver = false;
const obs = new ResizeObserver(() => {
if (!disableObserver) {
console.log('resize detected');
}
});
// the hack below doesn't work:
disableObserver = true;
obs.observe(someElement);
disableObserver = false;
推荐指数
解决办法
查看次数
CSS 动画：悬停入和悬停出
我尝试制作一个在悬停和悬停时触发的动画。我没有使用过渡属性，因为动画非常复杂。
- 悬停时：放大元素 100% => 150% => 130%
- 悬停时：缩小元素 130% => 80% => 100%
悬停输入工作完美，但悬停输出始终在启动时运行。当悬停时它应该动画。
然后尝试设置 CSS var --anim-hover-out: none，这样启动时就没有动画了。然后，在悬停结束时设置--anim-hover-out: hover-out，以便悬停动画现在可以播放了。但是在里面设置 CSS var@keyframes不起作用。
目标是：.test:not(:hover):has-hover { do hover-out animation }
注意：没有 JavaScript，只有纯 CSS。
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
div {
background: #eee;
margin: 0 auto;
width: 200px;
padding: 100px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px …推荐指数
解决办法
查看次数
Typescript 奇怪的类型交集“string & {}”
在一些库中，我经常看到类似这样的 TS 语法：
type AriaRole = 'alert' | 'tree' | 'treegrid' | 'treeitem' | (string & {});
是什么意思string & {}？
它是与对象相交的字符串。
这有意义还是可能是黑客行为？
推荐指数
解决办法
查看次数
React App 与 css 模块多个类
我创建了一个像这样的基本反应应用程序：
import React from 'react';
import style from './Button.module.scss';
export default class Button extends React.Component {
render() {
return (
<button className={[style.class, 'awesome', 'great'].join(' ')}>
hello world
</button>
);
}
}
CSS/SCSS：
.class {
background: pink;
color: red;
/* not working */
&:is(.awesome) {
border-width: 2px;
}
/* not working either */
&.awesome {
border-width: 2px;
}
/* works */
&:not(.great) {
border-style: dotted;
}
}
问题：子类.awesome不工作，但.great工作正常。你能修复代码以便它.awesome可以工作吗？我需要 .button 的一些子类，这样我就可以在运行时切换它们。
这是浏览器上生成的css，.awesome不是生成而是.great生成的。 …
推荐指数
解决办法
查看次数
标签 统计
html ×4
css ×3
javascript ×2
css-grid ×1
dom-events ×1
hover ×1
module ×1
reactjs ×1
typescript ×1