小编Jos*_*des的帖子

我如何知道IntersectionObserver滚动方向?

那么,当触发事件时,如何知道滚动方向?

在返回的对象中,我看到的最接近的可能性是与boundingClientRect保存最后滚动位置的类型进行交互,但我不知道处理boundingClientRect是否会最终导致性能问题.

是否可以使用交集事件来确定滚动方向(向上/向下)?

我添加了这个基本代码段,所以如果有人可以帮助我.
我会非常感激的.

这是片段:

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

function callback(entries, observer) { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('entry', entry);
    }
  });
};

var elementToObserve = document.querySelector('#element');
var observer = new IntersectionObserver(callback, options);

observer.observe(elementToObserve);
Run Code Online (Sandbox Code Playgroud)
#element {
  margin: 1500px auto;
  width: 150px;
  height: 150px;
  background: #ccc;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
  font-size: 25px;
  text-align: center;
  line-height: 150px;
}
Run Code Online (Sandbox Code Playgroud)
<div id="element">Observed</div>
Run Code Online (Sandbox Code Playgroud)

我想知道这一点,所以我可以在固定标题菜单上应用它来显示/隐藏它

html javascript css intersection-observer

26
推荐指数
3
解决办法
8795
查看次数

从输出文件中删除Webpack引导程序

好吧,我知道Webpack允许我们导入包,require这是Webpack的基础设施.

但是,当你不在require条目文件中使用时,这不是没用的吗?

我有这个test.js条目:

console.log('Test');
Run Code Online (Sandbox Code Playgroud)

和输出

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: …
Run Code Online (Sandbox Code Playgroud)

javascript node.js webpack

12
推荐指数
1
解决办法
3549
查看次数

iOS Safari 13.5 在具有长内容的固定元素上闪​​烁

您好,提前感谢您的时间。

我在 safari 中创建了一个可重现的错误,我听说这个错误很常见,我尝试了 Safari 的 hacks 来修复它,但遗憾的是没有运气。

问题很简单:

我有一个浮动卡,其初始位置固定在内容的底部,它具有click事件侦听器,它所做的只是通过转换切换position卡的 。

另一方面,我container将卡片包裹在一个位置固定元素中,该元素在卡片的位置是transitioned和 时进行修改static

我将articleto 固定,以便卡片可以使用页面的主滚动并且没有其他滚动上下文。

这是移动端预览的链接:https : //qiisu.csb.app/

下面是代码沙箱:https : //codesandbox.io/s/quirky-surf-qiisu?file=/index.html

如果您想在这里看到它,还有代码片段:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
            }

            #content {
                width: 100%;
                display: block;
                background-color: rgb(255, 255, 255);
                border-radius: 15px 15px 0px 0px;
                transform: none;
                padding: 15px;
                margin-top: …
Run Code Online (Sandbox Code Playgroud)

html javascript css flicker mobile-safari

8
推荐指数
1
解决办法
322
查看次数

使用NPM安装包会导致依赖循环

基本信息:

System: OS X 10.9.2
Npm version: 1.4.9
Node version: v0.10.28
Ruby Version : ruby ?2.1.1p76 ( 2/24/2014 Revision 45161 ) [ x86_64- darwin12.0 ]
Run Code Online (Sandbox Code Playgroud)

会发生什么事情,当我运行npm install -g bowersudo nom install -g命令或凉亭变成一个有错误但未完成的循环时,执行回滚并再次启动(我猜).

也恰好是设置下载的其他相关性,如karma,mocha,chai(我不知道是否会依存关系bower),但问题是,不仅如此,但它发生在尝试安装任何依赖考试:yeoman,grunt,等...

我尝试了以下命令,但问题仍然存在:

npm cache clean
npm cache clear
Run Code Online (Sandbox Code Playgroud)

这是一个部分 - debug.log npm文件:

32016 verbose etag " 9CS1TTNJ9VSLF7WEYXSRZ8EMQ "
32017 http GET https://registry.npmjs.org/grunt-contrib-jshint
32018 gunzTarPerm extractEntry silly example / test / test- example.js …
Run Code Online (Sandbox Code Playgroud)

node.js npm bower osx-mavericks

6
推荐指数
1
解决办法
3311
查看次数

延迟加载视网膜图像?

我有这个基本的延迟加载脚本与视网膜图像@ 2x和@ 3x.

(function(doc) {
  var div = doc.querySelector('div');
  var img = doc.querySelector('img[data-src]');

  img.onload = function() {
    img.removeAttribute('data-src');
    div.classList.add('done');
  };

  img.setAttribute('src', img.getAttribute('data-src'));
})(document);
Run Code Online (Sandbox Code Playgroud)
img {
  width: 300px;
  margin: 0 auto;
  display: block;
}

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

div {
  position: relative;
  min-height: 222px;
}

div:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 1px solid #9a9a9a;
  border-left: 1px solid #9a9a9a;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: …
Run Code Online (Sandbox Code Playgroud)

html javascript lazy-loading image

6
推荐指数
1
解决办法
623
查看次数

Link 标签中的 media 属性有什么用处?

在link标签中使用media属性对我们有什么好处或者改进吗?如果是这样?那么我不需要@media在 CSS 中使用该规则,使用 media 属性就足以为我的网页设置断点,对吗?

html css media-queries

4
推荐指数
1
解决办法
5739
查看次数

在打字稿中键入具有最大属性数量的动态键

我想知道是否可以在打字稿中键入对象中动态属性的最大数量。

所以基本的例子是跟踪事件:

events.track('SOME_EVENT', { first: 'a', other: 'b', some: 'c'})
Run Code Online (Sandbox Code Playgroud)

事件数据应该最多保存 3 个属性及其各自的值,键也可以是动态的。

我用 basic 键入它Record,但允许的属性数量没有限制:

export interface Events {
  track: (name: string, params?: Record<string, string | number | unknown>) => void;
}
Run Code Online (Sandbox Code Playgroud)

这可能吗?

javascript types typescript

2
推荐指数
1
解决办法
736
查看次数