TypeScript scrolling.ViewportRuler类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@angular/cdk/scrolling.ViewportRuler类的典型用法代码示例。如果您正苦于以下问题：TypeScript ViewportRuler类的具体用法？TypeScript ViewportRuler怎么用？TypeScript ViewportRuler使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了ViewportRuler类的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: describe

describe('BlockScrollStrategy', () => {
  let platform = new Platform();
  let viewport: ViewportRuler;
  let overlayRef: OverlayRef;
  let componentPortal: ComponentPortal<FocacciaMsg>;
  let forceScrollElement: HTMLElement;

  beforeEach(async(() => {
    // Ensure a clean state for every test.
    document.documentElement.classList.remove('cdk-global-scrollblock');

    TestBed.configureTestingModule({
      imports: [OverlayModule, PortalModule, OverlayTestModule]
    }).compileComponents();
  }));

  beforeEach(inject([Overlay, ViewportRuler], (overlay: Overlay, viewportRuler: ViewportRuler) => {
    let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.block()});

    overlayRef = overlay.create(overlayState);
    componentPortal = new ComponentPortal(FocacciaMsg);

    viewport = viewportRuler;
    forceScrollElement = document.createElement('div');
    document.body.appendChild(forceScrollElement);
    forceScrollElement.style.width = '100px';
    forceScrollElement.style.height = '3000px';
    forceScrollElement.style.background = 'rebeccapurple';
  }));

  afterEach(inject([OverlayContainer], (container: OverlayContainer) => {
    overlayRef.dispose();
    document.body.removeChild(forceScrollElement);
    setScrollPosition(0, 0);
    container.getContainerElement().parentNode!.removeChild(container.getContainerElement());
  }));

  it('should toggle scroll blocking along the y axis', skipIOS(() => {
    setScrollPosition(0, 100);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected viewport to be scrollable initially.');

    overlayRef.attach(componentPortal);
    expect(document.documentElement.style.top)
        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');

    setScrollPosition(0, 300);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected the viewport not to scroll.');

    overlayRef.detach();
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');

    setScrollPosition(0, 300);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(300, 'Expected user to be able to scroll after disabling.');
  }));


  it('should toggle scroll blocking along the x axis', skipIOS(() => {
    forceScrollElement.style.height = '100px';
    forceScrollElement.style.width = '3000px';

    setScrollPosition(100, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected viewport to be scrollable initially.');

    overlayRef.attach(componentPortal);
    expect(document.documentElement.style.left)
        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');

    setScrollPosition(300, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected the viewport not to scroll.');

    overlayRef.detach();
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');

    setScrollPosition(300, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(300, 'Expected user to be able to scroll after disabling.');
  }));


  it('should toggle the `cdk-global-scrollblock` class', skipIOS(() => {
    expect(document.documentElement.classList).not.toContain('cdk-global-scrollblock');

    overlayRef.attach(componentPortal);
    expect(document.documentElement.classList).toContain('cdk-global-scrollblock');

    overlayRef.detach();
    expect(document.documentElement.classList).not.toContain('cdk-global-scrollblock');
  }));

  it('should restore any previously-set inline styles', skipIOS(() => {
    const root = document.documentElement;

    root.style.top = '13px';
//.........这里部分代码省略.........

开发者ID:HemanthKona，项目名称:material2，代码行数:101，代码来源:block-scroll-strategy.spec.ts

示例2: describe

describe('BlockScrollStrategy', () => {
  let platform: Platform;
  let viewport: ViewportRuler;
  let documentElement: HTMLElement;
  let overlayRef: OverlayRef;
  let componentPortal: ComponentPortal<FocacciaMsg>;
  let forceScrollElement: HTMLElement;

  beforeEach(async(() => {
    documentElement = document.documentElement!;

    // Ensure a clean state for every test.
    documentElement.classList.remove('cdk-global-scrollblock');

    TestBed.configureTestingModule({
      imports: [OverlayModule, PortalModule, OverlayTestModule]
    }).compileComponents();
  }));

  beforeEach(inject([Overlay, ViewportRuler, Platform],
    (overlay: Overlay, viewportRuler: ViewportRuler, _platform: Platform) => {
    let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.block()});

    overlayRef = overlay.create(overlayConfig);
    componentPortal = new ComponentPortal(FocacciaMsg);

    viewport = viewportRuler;
    forceScrollElement = document.createElement('div');
    document.body.appendChild(forceScrollElement);
    forceScrollElement.style.width = '100px';
    forceScrollElement.style.height = '3000px';
    forceScrollElement.style.background = 'rebeccapurple';
    platform = _platform;
  }));

  afterEach(inject([OverlayContainer], (container: OverlayContainer) => {
    overlayRef.dispose();
    document.body.removeChild(forceScrollElement);
    window.scroll(0, 0);
    container.getContainerElement().parentNode!.removeChild(container.getContainerElement());
  }));

  it('should toggle scroll blocking along the y axis', skipIOS(() => {
    window.scroll(0, 100);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected viewport to be scrollable initially.');

    overlayRef.attach(componentPortal);
    expect(documentElement.style.top)
        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');

    window.scroll(0, 300);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected the viewport not to scroll.');

    overlayRef.detach();
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');

    window.scroll(0, 300);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(300, 'Expected user to be able to scroll after disabling.');
  }));


  it('should toggle scroll blocking along the x axis', skipIOS(() => {
    forceScrollElement.style.height = '100px';
    forceScrollElement.style.width = '3000px';

    window.scroll(100, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected viewport to be scrollable initially.');

    overlayRef.attach(componentPortal);
    expect(documentElement.style.left)
        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');

    window.scroll(300, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected the viewport not to scroll.');

    overlayRef.detach();
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');

    window.scroll(300, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(300, 'Expected user to be able to scroll after disabling.');
  }));


  it('should toggle the `cdk-global-scrollblock` class', skipIOS(() => {
    expect(documentElement.classList).not.toContain('cdk-global-scrollblock');

    overlayRef.attach(componentPortal);
    expect(documentElement.classList).toContain('cdk-global-scrollblock');

    overlayRef.detach();
    expect(documentElement.classList).not.toContain('cdk-global-scrollblock');
  }));
//.........这里部分代码省略.........

开发者ID:Nodarii，项目名称:material2，代码行数:101，代码来源:block-scroll-strategy.spec.ts

示例3: it

  it('should toggle scroll blocking along the y axis', skipIOS(() => {
    setScrollPosition(0, 100);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected viewport to be scrollable initially.');

    overlayRef.attach(componentPortal);
    expect(document.documentElement.style.top)
        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');

    setScrollPosition(0, 300);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected the viewport not to scroll.');

    overlayRef.detach();
    expect(viewport.getViewportScrollPosition().top)
        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');

    setScrollPosition(0, 300);
    expect(viewport.getViewportScrollPosition().top)
        .toBe(300, 'Expected user to be able to scroll after disabling.');
  }));

开发者ID:HemanthKona，项目名称:material2，代码行数:21，代码来源:block-scroll-strategy.spec.ts

示例4: it

  it('should toggle scroll blocking along the x axis', skipIOS(() => {
    forceScrollElement.style.height = '100px';
    forceScrollElement.style.width = '3000px';

    window.scroll(100, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected viewport to be scrollable initially.');

    overlayRef.attach(componentPortal);
    expect(documentElement.style.left)
        .toBe('-100px', 'Expected <html> element to be offset by the previous scroll amount.');

    window.scroll(300, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected the viewport not to scroll.');

    overlayRef.detach();
    expect(viewport.getViewportScrollPosition().left)
        .toBe(100, 'Expected old scroll position to have bee restored after disabling.');

    window.scroll(300, 0);
    expect(viewport.getViewportScrollPosition().left)
        .toBe(300, 'Expected user to be able to scroll after disabling.');
  }));

开发者ID:Nodarii，项目名称:material2，代码行数:24，代码来源:block-scroll-strategy.spec.ts

示例5: setScrollPosition

 /**
  * Scrolls the viewport and clears the cache.
  * @param x Amount to scroll along the x axis.
  * @param y Amount to scroll along the y axis.
  */
 function setScrollPosition(x: number, y: number) {
   window.scroll(x, y);
   viewport._cacheViewportGeometry();
 }

开发者ID:HemanthKona，项目名称:material2，代码行数:9，代码来源:block-scroll-strategy.spec.ts

注：本文中的@angular/cdk/scrolling.ViewportRuler类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。