Scrolling during a tour is buggy if height is set to 100% on body and html

未关闭
#1,030 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
angular, typescript
领域
frontend

调研方向

在仓库的 shepherd-tester 演示中使用 html 和 body height: 100% 重现该问题，然后检查 tour 的滚动行为。在不依赖已报告的 CSS workaround 的情况下，重复滚动仍能让 tour modal 保持可访问，而不是在 modal 滚出视图后停止，即表示工作完成。

由索引模型根据 Issue 内容生成。

描述

If you style your Angular app's "body" and "html" tags with "height: 100%" and then start a tour, scrolling will partially work (just as the demo "shepherd-tester" in the repo), but if you scroll up and down a bit, scrolling will suddenly stop working and you might get stuck with the tour modal out of view.

So if you have

body, html {
    height: 100%;
}

in your styles.css, and want to use Angular Shepherd without the buggy scroll behavior, you need to find another way to make your app have full width/height with regards to the browser window.

One workaround that seems to work for me so far is:

styles.css

html, body {
  min-height: 100vh;
  margin: 0;
}
body {
  display: flex;
}

app.component.css

:host {
    flex: 1;
}
主要语言
TypeScript
星标
238
派生
50
平均合并
1 分钟
30 天内合并 PR
9

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

shipshapecode/angular-shepherd 的其他 Issue

查看 shipshapecode/angular-shepherd 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。