这是经典。您有一个父元素和一个子元素。子元素是绝对定位的，您希望用户滚动浏览其内容。但是，当您到达子元素的底部时，父元素(也允许有滚动条)开始滚动。这是不可取的。我想重现的基本行为是纽约时报的评论部分。对于 example :
正文允许向下滚动，但是当您位于评论部分的底部时，向下滚动不会执行任何操作。我认为这种情况下的主要区别在于，当光标位于 body 元素上时，我想让用户向下滚动。其他方法需要向主体添加一个类以防止主体中出现任何滚动事件。我以为我可以在 Angular 2 中使用一些 Javascript 来做到这一点，但这是我迄今为止失败的尝试:
我的子组件中有一个自定义指令:
<child-element scroller class="child"></child-element>
并且该指令应该停止将滚动事件传播到 body 元素:
import {Component} from 'angular2/core'
import {Directive, ElementRef, Renderer} from 'angular2/core';
@Directive({
selector: '[scroller]',
})
export class ScrollerDirective {
constructor(private elRef: ElementRef, private renderer: Renderer) {
renderer.listen(elRef.nativeElement, 'scroll', (event) => {
console.log('event!');
event.stopPropagation();
event.preventDefault();
})
}
}
它实际上监听事件但不会停止传播。
Demo :向下滚动数字列表，当您到达底部时，其父元素开始向下滚动。那就是问题所在。
如果您有其他方法可以实现此目的，请告诉我。
更新:根据 Günter Zöchbauer 提供的答案，我试图在用户到达底部时阻止滚轮事件。这基本上就是我到目前为止在这个 updated demo 中所拥有的:
renderer.listen(elRef.nativeElement, 'wheel', (e) => {
console.log('event', e);
console.log('scrollTop', elRef.nativeElement.scrollTop);
console.log('lastScrollTop', lastScrollTop);
if (elRef.nativeElement.scrollTop == lastScrollTop && e.deltaY > 0) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
else if (elRef.nativeElement.scrollTop == 0) {
lastScrollTop = -1;
}
else {
lastScrollTop = elRef.nativeElement.scrollTop;
}
}, false)
但是，逻辑很丑陋，效果不佳。例如，当用户到达底部，向上滚动一点然后再次向下滚动时，父组件会轻微移动。有谁知道如何处理这个？一个(好得多)更好的实现？
更新 2:
This好多了，不过现在晚了，明天再看看。
最佳答案
在我看来，我会提出更直接的建议:将任意类添加到任意父级，并通过 CSS overflow: hidden 防止滚动。
在这个例子中，我写了指令来防止父元素在元素存在时滚动，因为这是我想要的行为。而不是 OnDestroy 和 AfterViewInit，对于您的用例，您应该绑定(bind)到 mouseenter 和 mouseleave
HTML:
<div add-class="noscroll" to="body">Some Content Here</div>
CSS:
.noscroll { overflow: hidden; }
TS:
import {Directive, AfterViewInit, OnDestroy, Input} from "@angular/core";
@Directive({
selector: '[add-class]'
})
export class AddClassDirective implements AfterViewInit, OnDestroy {
@Input('add-class')
className: string;
@Input('to')
selector: string;
ngOnDestroy(): void {
document.querySelector(this.selector).classList.remove(this.className);
}
ngAfterViewInit(): void {
document.querySelector(this.selector).classList.add(this.className);
}
}
关于javascript - 防止滚动子元素在 Angular 2 中传播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36488478/
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
Ruby中防止SQL注入(inject)的好方法是什么？ 最佳答案 直接使用ruby？使用准备好的语句:require'mysql'db=Mysql.new('localhost','user','password','database')statement=db.prepare"SELECT*FROMtableWHEREfield=?"statement.execute'value'statement.fetchstatement.close 关于ruby-防止SQL注入(inject
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
我在生产环境(CentOS5.6)中遇到此错误，但在开发环境(Ubuntu11.04)中运行良好。在这两种环境中，该应用程序都使用Ruby1.9.3和Rails3.0.9，并由passenger和nginx提供服务。我的Mechanizegem版本是2.3。未找到代码转换器(UTF-8)此代码的最后一行触发它:mech=Mechanize.newpage=mech.get("http://myurl.com/login.php?login_name=a&password=b")form=page.form_with(:name=>"loginForm")form.field_with(
我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=