我有一个页面显示消息,我希望它像Facebook一样工作,但没有懒惰的加载器.消息按时间顺序显示,最近一次显示.
我的消息列表最初填充了x个最新消息,窗口滚动到底部.当用户开始阅读该帖子时,他们会从下到上阅读.如果他们到达顶部,他们可以加载更多消息...我让他们点击一个按钮... facebook有一个懒惰的加载器.新消息将添加到列表中.
问题:由于新消息被添加,现有消息被推下,导致用户失去"查看"位置.在添加新消息时,如何保持用户当前的视图位置？例如,在Facebook中打开一个长消息线程,滚动到顶部导致添加新消息...即使滚动位置确实如此,您的视图位置也不会改变.
我正在使用以下代码,当滚动条到达底部时,该代码正在工作,
if($(window).scrollTop() == $(document).height() - $(window).height()){
但是我希望当我达到70%的卷轴而不是100时,ajax会被触发.
我正在尝试滚动到滚动DIV中的特定位置.现在我使用jQuery scrollTop()函数的像素偏移量,它在桌面浏览器上运行良好,但除了谷歌的Chrome Android浏览器之外它在Android手机浏览器上不起作用(没有iOS设备来测试它是否有效).我找到的所有解决方案都是用于页面(窗口)滚动而不是用于在DIV中滚动,任何人都有任何关于我可以用来完成相同任务的建议吗？
这是一个例子:
http ://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/
我试过的其他东西在桌面浏览器中工作:
document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;
编辑3/11/13:
这是一个知道Android浏览器问题:https://code.google.com/p/android/issues/detail？id = 19625
错误报告中的一位用户提出了一种解决方法:
因为只有在溢出属性设置为滚动时才会出现问题,您可以先将其设置为"隐藏",设置scrollTop属性,然后将其重置为"滚动"(或自动).使用滚动条重新呈现元素时,scrollTop属性似乎很荣幸.目前尚不清楚这是否有任何意想不到的副作用,但"它适用于我的机器!"
请考虑以下网页:
<html>
<body onscroll="alert('body scroll event')">
<div style='width:200px;height:200px;overflow:auto' onscroll="alert('div scroll event')">
<div style='height:400px'>
</div>
</div>
</body>
</html>
这个html创建一个带滚动条的div.如果移动滚动条,则会触发div元素上的"onscroll"事件.但是,身体上的"onscroll"事件不会被触发.这是预期的,因为W3C声明元素onscroll事件不会"冒泡".
但是,我正在开发一个客户端Web框架,只要滚动页面的任何元素上的滚动条,就需要知道它.如果"onscroll"冒泡,这很容易做到,但不幸的是,它没有.有没有其他方法可以检测整个页面上的onscroll事件？(现在我主要关注Webkit,所以特定于Webkit的解决方案会很好......)
以下是我尝试过的一些事情:1.捕获DOMAttrModified(似乎不会触发移动滚动条.)2.使用DOM Observers(似乎也不会触发滚动条)3.更改"onscroll"事件类型泡沫(似乎不可能)
似乎全局捕获onscroll事件的唯一方法是将onscroll事件附加到可能滚动的每个元素,这非常难看并且会损害我的框架的性能.
谁知道更好的方法？
提前致谢!
是否可以将指针事件设置为仅对触摸板上的滚动或拖动作出反应？我有一个div'在路上'用于滚动复杂的html排列*我想知道我是否可以限制指针事件只对滚动/鼠标滚轮动作作出反应.
我很想知道我是否正确理解这一点.如果pointer-events:none;意味着所有事件都无效,我如何杀死所有事件但保留一个活动？
我已经设置了一个比它适合的框大的HTML区域,但是如果我要显示滚动条,由于弹出(position:top)元素,它看起来会比它应该更高.这个区域仍然需要滚动才能实现这一点我已经使用jQuery使我的'框滚动'跟随div中的一个不可见的div:
<div id="scrollcontrol"style="overflow-y:auto;overflow-x:hidden;position:absolute;
top:12px;left:180px;width:40px;height:1300px;">
<div id="catscrollpos"style="position:absolute;
top:0px;width:200px;height:2250px;">
</div>
</div>
脚本
$('#scrollcontrol').scroll(function({
$('#rangetable').css({
'top':$('#catscrollpos').position().top+'px'
});
});
使用谷歌Chrome的DevTools移动仿真,似乎触摸滚动不起作用.
看到这个测试:http://codepen.io/dstj/pen/Datcw
滚动适用于iPad 3的Safari和Android 4.2的Chrome,但在使用触摸屏仿真的Google DevTools中无效.
我看到的另一个区别是滚动条出现在DevTools上,但不出现在平板电脑上......
有什么想法吗？
注意:使用Chrome版本33.0.1750.154 m
当用户向下滚动时,我的页面上有一个按钮可见.因此,量角器测试给我一个错误:
UnknownError:未知错误:元素在点(94,188)处不可点击.
我试过用:
browser.executeScript('window.scrollTo(0,document.body.scrollHeight)');
当我在量角器elementexplorer.js中进行测试时有效,但在我的常规测试中它没有做任何事情.还有其他方法吗？
使用的对象列表ng-repeat.假设此列表非常长并且用户滚动到底部以查看某些对象.
当用户观察对象时,新项目将添加到列表顶部.这导致观察对象改变其位置,即用户突然在观察对象的相同位置看到其他东西.
当添加新项目时,您将如何将观察对象保持在同一位置？
我查看了几个相关的帖子和文档,但仍然无法从@ViewChild获得预期的行为.
最终,我正在尝试设置div的滚动位置.此元素不是组件,而是HTML中的普通div.
为了实现这一点,我试图使用@ViewChild来获取我需要的DOM元素,并设置其滚动值.(顺便说一句,如果你知道一个更好的方法来实现这个没有@ViewChild(或jQuery),将非常感谢答案!)
目前,@ ViewChild只返回undefined.经历一些虚拟检查: - 我在AfterViewInit中访问我的元素 - 我没有任何其他指令,如*ngIf或*ngFor在这个元素上.
这是控制器:
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'portfolio-page',
templateUrl: './portfolio-page.component.html',
styleUrls: ['./portfolio-page.component.scss']
})
export class PortfolioPageComponent implements AfterViewInit{
@ViewChild('gallery-container') galleryContainer: ElementRef;
ngAfterViewInit(){
console.log('My element: ' + this.galleryContainer);
}
}
和模板:
<div id='gallery-container' class='gallery-image-container'>
<div class='gallery-padding'></div>
<img class='gallery-image' src='{{ coverPhotoVm }}' />
<img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>
我的输出很简单:我的元素:未定义.
如您所见,我目前正在尝试按ID访问元素,但也尝试过类名.任何人都可以提供有关ViewChild选择器查询期望的更多详细信息吗？
我还看到了一个示例,其中散列'#'用作@ViewChild使用的选择器标识符 - 但是这会导致我使用#gallery-container导致模板解析错误.
我想不出任何可能在这里错误的事情.感谢所有帮助,谢谢!
完整代码可在此处获取:https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page
我似乎无法捕获Window滚动事件.在几个网站上,我发现代码与此类似:
@HostListener("window:scroll", [])
onWindowScroll() {
console.log("Scrolling!");
}
这些片段通常来自版本2.这在Angular 4.2.2中似乎不起作用(不再？).如果我将"window:scroll"替换为"window:touchmove",那么touchmove事件处理得很好.
有谁知道我错过了什么？非常感谢你!