[英]jQuery scrollLeft not working with angular
I'm trying to programmatically scroll a div, overflowing horizontally. 我正在尝试以编程方式滚动div,水平溢出。 I feel pretty confident that my end result code should look like this:
我非常有信心我的最终结果代码应如下所示:
var $element = $('#widgetRow');//or maybe $('#widgetRow').parent();
//With 1 or more parent()'s
var scrollLeft = $element.scrollLeft();
$element.animate({'scrollLeft':scrollLeft + delta},10);
But I couldnt seem to find the right element, so it wasnt working, So I wrote this little snip-it to test all of the parent elements for scrolling. 但是我似乎找不到合适的元素,因此它无法正常工作,所以我写了这个小片段来测试所有父元素的滚动。
$('#someDeepWidget').parents().each(function(){
$(this).animate({'scrollLeft':300},10);
});
And some elements scrolled, but not the one that I needed to. 某些元素滚动了,但不是我需要的。 However, the correct element does scroll horizontally with:
但是,正确的元素的确会水平滚动:
$('#someDeepWidget').parents().each(function(){
$(this).animate({'scrollTop':300},10);
});
But I can't seem to figure out which element reacts. 但是我似乎无法弄清楚哪个元素会做出反应。 I have been placing id's all over my HTML and targeting them, but still, scrollLeft fails on the element I need.
我一直在我的HTML上放置id并将它们定位为目标,但仍然,scrollLeft在我需要的元素上失败了。
I am using Angular, and I don't know if that could be interfering in some way. 我正在使用Angular,但我不知道这是否可能以某种方式进行干扰。
Nehat (from www.lin.net.nz: Problem: jQuery ScrollLeft Chrome Hidden Div ) points out that, this can some times be solved with Nehat(来自www.lin.net.nz:问题:jQuery ScrollLeft Chrome Hidden Div )指出,这可以用以下方法解决
element.css({'overflow': 'auto'}).scrollLeft();
element.css({'overflow': 'hidden'});
Which lead me to wonder, would this work? 哪个使我想知道,这行得通吗?
$('#someDeepWidget').parents().each(function(){
$(this).css({'overflow': 'auto'}).animate({'scrollLeft':300},10);
$(this).css({'overflow': 'hidden'});
});
and like magic the content scrolled! 就像魔术一样,内容在滚动!
With that knowledge I worked my way up the elements of HTML in Chrome, where before I was modifying my html document and trying the solution, in Chrome I noticed that Angular was adding to my page, this element: 掌握了这些知识之后,我逐步研究了Chrome中HTML的元素,在我修改html文档并尝试解决方案之前,在Chrome中我注意到Angular正在向我的页面添加以下元素:
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
So I added a css rule for this newly discovered element: 因此,我为此新发现的元素添加了CSS规则:
[data-role="page"]{
overflow:auto;
}
The final code looks like this: 最终代码如下所示:
app.directive("gphBubbleHorizontalScrolling", function($swipe) {
'use strict';
return {
restrict: 'EA',
link: function(scope, ele, attrs, ctrl) {
$swipe.bind(ele, {
'start': function(coords,event) {
startX = coords.x;
startY = coords.y;
},
'move': function(coords) {
pointX = coords.x;
pointY = coords.y;
if(pointY < startY + 20 && pointY > startY - 20){
var delta = startX - pointX;
$('[data-role="page"]').animate({'scrollLeft':scrollLeft + delta},10);
var scrollLeft = $('[data-role="page"]').scrollLeft();
}
}
});
}
}
}
I had to horizontally scroll to a specific column 2/3rds the way on my grid when loading my page and I had a fixed number of columns, so I took a very simplistic approach. 加载页面时,我必须在网格上水平2 / 3rds地水平滚动到特定的列,并且列数固定,因此我采用了一种非常简单的方法。
$(".ngViewport").scrollLeft(($("#datagrid").width())/4);
ngViewport
and scrollLeft
from jQuery with minimal effort. ngViewport
和scrollLeft
。 .ngViewport
targets any ng
grid. .ngViewport
以任何ng
网格为目标。 I used #datagrid
and converted the width value. #datagrid
并转换了宽度值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.