在iOS上z-index,使用时会忽略可滚动区域-webkit-overflow-scrolling.如果两个-webkit-overflow-scrolling重叠的对象滚动,则滚动而不是上面显示的对象.
创建两个彼此重叠的元素(position: absolute例如),其中一个元素具有更高的元素z-index并添加
.selector
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
对他们两个.两个元素都应该具有足够的内容以便可滚动.
另外添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
到你的<head>.然后将页面添加到主屏幕并从那里启动它.
如果您然后尝试滚动上部元素,则会滚动下面的元素.
或者只是看看这支笔.从iOS设备启动完整版,将其添加到主屏幕并从那里启动.
使用iOS 9.1和iOS 9.3.2在iPhone 5和iPhone 6上进行测试
overflow-y为hidden通过JS确实可以解决问题,但是切换overflow会导致重新绘制导致性能问题height: 100%; width: 100%从html, body解决问题为好,但这些都必须设置百分比值正常工作需要一个适当的解决方案/解决方法来解决这个问题,而不会造成任何麻烦的副作用.还要理解为什么会发生这种情况.
关于SO上的溢出/橡皮带滚动主题已经存在多个问题但是
这就是我将这篇文章创建为知识体系的原因.
在任何其他帖子中从未提及的事情是iOS溢出滚动实际上是两部分行为.
overflow: auto/scroll这是元素的通常已知且最常想要的行为,-webkit-overflow-scrolling: touch其中连续/动量滚动行为经过元素容器以平滑地减慢滚动内容.
当您以足够高的动量滚动元素的内容以使动量滚动超过滚动内容的长度时,就会发生这种情况.
通过此行为,element.scrollTop属性相应地更改为元素滚动位置并且小于0或大于最大scroll(element.scrollHeight - element.offsetHeight).
<body>如果您尝试滚动任何元素已经在其最小/最大滚动位置甚至更远(顶部向上的元素或底部向下的元素),则会发生此行为.然后滚动似乎"冒泡"到<body>标签,并滚动整个视口.
与上述相反,该element.scrollTop属性不会改变,而是document.body.scrollTop改变.
在这种情况下最令人恼火的事情是上述两种类型之间的切换不会立即切换.
输入其中一个之后,您无法将焦点切换到任何其他元素(可滚动元素,按钮,链接......),因此滚动行为也不会改变.
例如:如果您向上滚动已经位于其顶部位置的元素,则输入
overflow scrolling type 2并且用户最自然的反应是尝试向下滚动.因为焦点被锁定在身体滚动而不是overflow scrolling type 1它停留在type 2身体上并且整个身体向下滚动.然后,典型的用户开始任意地开始频繁地向上和向下滚动而不会突破type 2.
焦点的切换以及滚动行为的改变只能在溢出动画结束并且元素静止(甚至比[大约0.5s]更长)之后才会发生.
因此回到前面的例子,用户的正确反应是停止触摸屏幕大约1s - 1.5s然后再尝试向下滚动.
node_modules尽管该文件夹被排除在外,但仍存在几个关于为什么抛出错误的github问题tsconfig.json.如果importlib上有任何内容,则忽略该exclude属性.
但是,当使用更严格的编译器选项(即strictNullChecks,noUnusedLocals...)并引用任何未设计用于这些选项的lib时,会引发错误.
因此,每当使用这样的lib时,总是决定不使用lib或不使用编译器选项.但是有大型库/框架不支持这些选项(即Angular),所以似乎没有办法使用这些选项来确保在自己的项目中进行严格的检查.
我是否错过了避免抛出node_modules错误的可能性？如果没有,是否有任何技术要求将这些规则应用于所有导入的库或这种行为背后的原因是什么？
是否可以使用TypeScript类创建js-data资源定义？
我一般想要的是对计算属性和实例方法定义进行完全打字支持.
什么是令人敬畏的是这样的:
class SomeModel
{
public someBusinessModelValue = 'foo';
public someMoreValues = 'bar';
public get someComputedProperty()
{
return this.someBusinessModelValue + someMoreValues;
}
public instanceMethod(param: string)
{
return this.someMoveValues.search(param);
}
}
然后
DS.defineResource(fromClass('name', '/endpoint', 'idAttr', SomeModel));
或者更进一步,并将其定义为
class SomeModelStore extends SomeModel
{
name = 'name';
endpoint = 'endpoint';
idAttribute = 'idAttr';
relations =
{
//[...]
}
}
并使用它
DS.defineResource(SomeModelStore);
请注意,这些只是对我希望它看起来像什么的一些想法,我知道它可能不会完全像那样.
问题
iOS 6中，似乎创造与每一个后代一个新的堆叠内容position以外static，如果不考虑z-index设置与否。
有谁知道这是正常的预期行为，还是这会-webkit-overflow-scrolling干扰堆叠顺序？
例
参见下面的代码，或JSFiddle
这两个row元素都有位置relative，但没有位置z-index。我笔记本电脑上的Google Chrome和Safari都在第二个顶部显示了蓝色的“子菜单” row。
当示例在iOS模拟器上进行测试时，“子菜单”呈现在第二个菜单之后row。删除-webkit-overflow-scrolling: touch它后，渲染效果与我预期的一样。
在我看来，添加-webkit-overflow-scrolling: touch后将为每个后代创建一个新的堆叠上下文，并设置其他位置（static无论是否z-index设置）。
<style>
div.content {
-webkit-overflow-scrolling: touch;
}
div.row {
width: 100%;
position: relative;
background: red;
margin-bottom: 10px;
}
div.sub {
position: absolute;
top: 100%;
z-index: 2;
background: blue;
}
</style>
<div class="content">
<div class="row">
A
<div class="sub">
Sub menu of A<br>
Sub …启动webpack-dev-server时，会引发以下警告：
WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
11051:13-17 "export '?cmf' was not found in '@angular/core'
WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
11056:13-17 "export '?mod' was not found in '@angular/core'
WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
11061:13-17 "export '?mpd' was not found in '@angular/core'
由于仅是警告，因此在尝试访问应用程序时仍会生成并提供输出
Uncaught TypeError: jit_val0 is not a function
at eval (module.ngfactory.js? [sm]:1)
at evalExpression (compiler.es5.js:26423)
at jitStatements (compiler.es5.js:26435)
at JitCompiler._compileModule (compiler.es5.js:26716)
at compiler.es5.js:26655
at Object.then (compiler.es5.js:1679)
at JitCompiler._compileModuleAndComponents (compiler.es5.js:26653)
at JitCompiler.compileModuleAsync (compiler.es5.js:26582)
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4811)
at PlatformRef_.bootstrapModule (core.es5.js:4797)
(anonymous) @ module.ngfactory.js? [sm]:1
evalExpression @ compiler.es5.js:26423
jitStatements …我正在使用controller as-syntax并遇到了一个荒谬的情况
this.showAddressDetail = false;
this.searchPlace = function() {
GoogleService.searchPlace($('#address')[0], function(place) {
this.showAddressDetail = true;
});
};
每当触发GoogleService.searchPlace的回调时.我想为this.showAddressDetail 指定true.但在这种情况下this是回调函数.
那么如何为this.showAddressDetail赋值？
在使用Typescript 2直接导出路由器并且@types/express@4.0.35代码抛出后的定义时,在多个文件中定义嵌套路由器的通用构造
error TS4023: Exported variable 'router' has or is using name 'Router' from external module
"[...]/node_modules/@types/express-serve-static-core/index" but cannot be named.
以basarat的答案为例
import * as express from "express";
// import sub-routers
import * as adminRouter from "./admin/admin";
import * as productRouter from "./products/products";
let router = express.Router();
// mount express paths, any addition middleware can be added as well.
// ex. router.use('/pathway', middleware_function, sub-router);
router.use('/products', productRouter);
router.use('/admin', adminRouter);
// Export the router
export = router;
在RESTful API中,我拥有用户资源/users,/users/:id包括用户名,电子邮件地址和密码.
当我想更新用户信息时,我可以轻松地PATCH:/users/:id使用一些JSONPatch数据.
现在的问题是,我无法弄清楚如何处理更改密码的情况有currentPassword,newPassword和newPasswordConfirm形成.
应该使用什么方法(PATCH似乎合适但有问题)以及数据应以何种方式传输(正文/标题/ ......).
在更广泛的范围内 - 如何处理具有更多验证字段的补丁.
这篇文章似乎有关,但没有涵盖这个确切的主题.