小编dar*_*ong的帖子

从父顶部获取子元素距离

子级与顶级父级的距离

假设我<li>在可滚动 div 中有一个元素,并且滚动设置为在视口中显示该元素。

我需要得到该元素及其滚动母公司之间的距离,如上面的图片,但两者element.getBoundingClientRect().topelement.offsetTop给我错误的价值观。可以做到吗?

我做了一支笔,让事情变得简单一点:

http://codepen.io/Darksoulsong/pen/LbYMex

我的一段代码:

document.addEventListener("DOMContentLoaded", function(event) { 
  var selectedEl = document.getElementById('consequatur-51');
  var selectedElRect = selectedEl.getBoundingClientRect();
  var sidebar = document.getElementById('sidebar');  
  sidebar.scrollTop = selectedEl.offsetTop - 60;

  document.getElementById('offsetTop').innerText = selectedEl.offsetTop;
  document.getElementById('rectTop').innerText = selectedElRect.top;
});
Run Code Online (Sandbox Code Playgroud)

html javascript

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

el.getBoundingClientRect() 上的 MutationObserver 检测屏幕上的元素位置

我试图在不轮询或使用诸如此类的事件的情况下检测 DOM 元素屏幕位置变化onscrollMutationObserver会做到这一点,但它似乎不适用于方法(例如 getBoundingClientRect() )。

那是准确的吗?如果没有,我如何使用 MutationObserver 来检测 clientRect 更改?

示例:https : //codepen.io/Darksoulsong/pen/rwOQLo

添加新框,滚动视口,添加更多框并注意 rect 值不会更新。

javascript mutation-observers

6
推荐指数
0
解决办法
1264
查看次数

Twitter Bootstrap".container"类:如何在语义上使用它?

一天前,我决定玩Twitter Bootstrap.发现它非常精心制作,但我不是所有那些污染我的HTML的类的粉丝.

因此我尝试使用Less来使其更具语义性.直到我跨过.container课程,我才做得很好."mixins.less"文件(第580行)中有一个mixin,用于设置容器宽度.但是如果不直接在html上包含类,我就无法工作.将它放入我的自定义文件时,我总是遇到编译错误.我尝试复制并插入我的文件,但没有成功......任何人都经历过这个?

当然,我可以手动强制宽度,但我不认为这是最好的方法.有任何想法吗?

mixins template-mixins less twitter-bootstrap

5
推荐指数
1
解决办法
5994
查看次数

Javascript(jquery) - 附加到一个事件的多个处理程序:如何只分离一个事件?

在这个模块中我正在研究我在窗口中有一个'resize'事件的监听器.每次运行模块时,我都需要检查是否已经有一个监听器注册到该事件并将其分离,以避免不必要的行为,内存泄漏等.

到目前为止一直很好,但是,在我们正在开发的这个应用程序中,有些处理程序已经附加到'resize'事件并且我无法调用$(window).off('resize'),因为这将刷新之前由其他插件注册的所有其他事件处理程序或模块.

话虽如此,我想知道是否有办法识别我的处理程序,只分离我自己注册的东西.如何在事件处理程序中设置标识符以便在.off()函数中引用?

你能帮忙的话,我会很高兴.

javascript jquery javascript-events

5
推荐指数
1
解决办法
715
查看次数

ecmascript 6 中的“@”字符是什么意思?

给定下面的脚本,可以在Angular 2 官方教程中找到,“@”字符是什么意思?这是 ecmascript 6 的功能吗?

谁能详细说明一下吗?

import {Component} from 'angular2/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 angular

5
推荐指数
1
解决办法
213
查看次数

Typescript - 将类型定义从一个文件导入到另一个文件

给定以下文件,如何将定义从 bar.d.ts 导入到 foo.d.ts 命名空间?

我的目标是能够将模块声明导入另一个模块,并将其添加到命名空间。

// bar.d.ts
declare module 'IBarService' {
    export function method (url: string): ng.IPromise<any>;
}

// foo.d.ts
/// <reference path="bar.d.ts" />

export as namespace Foo;

export = Foo;

declare namespace Foo {
    // import methods from IBarService. But how?
}
Run Code Online (Sandbox Code Playgroud)

任何帮助都会很棒。关于如何在不同项目之间重用自定义定义的任何见解也会很棒。

typescript typescript-typings

5
推荐指数
0
解决办法
853
查看次数

TSLint - 需要数组括号内的空格

是否可以像我们在JSCS中所做的那样,在 TSLint 中的数组括号、函数、if、for、switch 和对象文字中强制使用空格?

例如:

const list = [ 1, 2, 3 ];

console.debug( list[ 1 ]; );

function foo ( a, b, c ) {
    ...
}

const obj = { bar: 'bar' };

while ( true ) {
    if ( false ) { 
        console.log( 'bar' );
    }
}
Run Code Online (Sandbox Code Playgroud)

typescript jscs tslint

5
推荐指数
0
解决办法
373
查看次数

vscode 和 jsdocs - 如何为 javascript 函数使用 TS 接口或类型

我知道类型或接口可用于智能感知函数 params 或 inline @type。但是有没有办法使用类型/接口为整个函数或对象文字提供智能感知?例子:

type TFunc = ( x: number ) => boolean;

/**
 * @implements {TFunc}
 */
function isNumber ( x ) {
    return typeof x === 'number';
}
Run Code Online (Sandbox Code Playgroud)

@implements不起作用。我想知道是否可以通过其他方式做到这一点?

javascript jsdoc typescript visual-studio-code

5
推荐指数
1
解决办法
535
查看次数

Groovy - 检查param是否是一个函数

在JavaScript中,这是我检查函数参数是否是函数的方式:

function foo ( p ) {
    if ( typeof p === 'function' ) {
        p();
    }
    // ....
}
Run Code Online (Sandbox Code Playgroud)

我怎么能在Groovy中做同样的事情?

parameters groovy function typechecking

5
推荐指数
2
解决办法
823
查看次数

Flutter:如何使用变量将参数传递给 Widget?

这是一些伪代码,显示了我想要实现的目标:

Text txt(text, [subtitle = false]) {
  final params = subtitle
      ? {
          'textAlign': TextAlign.center,
          'style': TextStyle(color: Colors.purple)
        }
      : {
          'textAlign': TextAlign.left,
          'style': TextStyle(color: Colors.black54)
        };

  return Text(
    text,
    ...params,
  );
}
Run Code Online (Sandbox Code Playgroud)

是否可以将变量参数传递给 Flutter 小部件?请记住,Text 小部件只是一个示例,而不是我问题的焦点,它可以是任何其他 Flutter 小部件,例如 Container 或 SizedBox。

variables arguments dart flutter

5
推荐指数
1
解决办法
4906
查看次数