标签: scroll

我有一个网络应用程序.我正在尝试禁用/阻止当您专注于不同的表单输入时发生的滚动(即,当您通过表单中的输入元素前进时发生的滚动).

我已经禁用了滚动:

 <script type="text/javascript">
     $(document).ready(function() {
         document.ontouchmove = function(e){
              e.preventDefault();
              }
     });
 </script>

要添加更多信息 - 我的页面包含一些"幻灯片".每个都是768x1024,它们在页面上"堆叠"(即页面是768x3072 [1024*3 = 3072]),当你点击链接我正在使用scrollTo jquery插件滚动到下一个"幻灯片"并.focus()在输入元素.

有谁知道如何做到这一点？

我把一个WebView加载到ViewPager中的图像.当我尝试水平滚动图像时,我移动到下一个视图而不是滚动图像.

是否可以在移动到下一个视图之前滚动到图像的末尾？

@Override
public Object instantiateItem(View view, int i) {

    WebView webview = new WebView(view.getContext());
    webview.setHorizontalScrollBarEnabled(true);
    webview.loadUrl("http://www.site.with.an/image.gif");
    ((ViewPager) view).addView(webview, 0);

    return webview;
}

如何在没有动画的情况下使用scrolltop

此代码有效:

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').animate({scrollTop: '+=' + offTop + 'px'}, 400);

这是我的(不工作的解决方案):

$("#mainCt").scrollTop('+=' + offTop + 'px');                 // doesn't work
$("#mainCt").scrollTop('+='+offTop);                          // doesn't work
hhh = setTimeout(' $("#mainCt").scrollTop('+offTop+');',800); // doesn't work

演示
http://jsfiddle.net/DNNFF/9/

我试图让一个内容块始终显示给用户,即使他向下滚动页面.他还应该能够在内容块中上下滚动.这是一个带有精简版的小提琴,向您展示我的意思:

http://jsfiddle.net/9ehfV/2/

当向下滚动时,应该注意到,直到到达红色块的底部,它将把块固定在窗口上,当向上滚动时,它将它放回去.

在Firefox中,可以上下滚动,上面描述的固定/解除固定是不可察觉的 - 像丝绸一样光滑.

然而,一旦尝试在Chrome或IE中滚动,看起来滚动事件就会滞后,人们可以看到块"毛刺"一秒钟.这不是代码延迟 - 它似乎与浏览器有关.

有没有什么办法解决这一问题？我的智慧结束了.

我很欣赏有关如何以不同的方式达到同样效果的建议......谢谢

我无法获得平滑的滚动服务以在角度2中工作.是否有任何平滑滚动或平滑锚定的服务,这可能会工作,直到角度2团队获得$ anchorScroll angular2等效工作？

到目前为止,我刚刚尝试过:

在父div上设置*ngFor循环增量ID

[attr.id]="'point' + i"

在id传递的按钮上调用scrollto

<button 
     type="button" 
     class="btn btn-lg btn-default " 
     (click)="smoothScroll('point'+i)">
           Scroll to point
</button>

在相关组件中,我试图实现一个简单的js平滑滚动功能

smoothScroll(eID) {
        var startY = currentYPosition();
        var stopY = elmYPosition(eID);
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            scrollTo(0, stopY); return;
        }
        var speed = Math.round(distance / 100);
        if (speed >= 20) speed = 20;
        var step = Math.round(distance / 25);
        var leapY = stopY > startY ? …

我有一个WPF应用程序ListBox.拖动机制已经实现,但是当列表太长并且我想将项目移动到不可见的位置时我不能.

例如,屏幕显示10个项目.我有20件物品.如果我想将最后一项拖到第一个位置,我必须拖到顶部并放下.向上滚动并再次拖动.

如何进行ListBox自动滚动？

我的原型显示"文档",其中包含由缩略图图像表示的"页面".每个文档可以包含任意数量的页面.例如,可能有1000个文档,每个文档有5个页面,或者5个文档,每个文档有1000个页面,或者介于两者之间.文件不包含其他文件.在我的xaml标记中,我有一个ListBox,其ItemsTemplate 引用的innerItemsTemplate也有一个ListBox.我想要2级选定的项目,以便我可以对文档或页面执行各种操作(删除,合并,移动到新位置等).innerItemsTemplate ListBox使用a WrapPanel作为ItemsPanelTemplate.

对于我有大量文档的情况,每个文档都有几个页面(比如10000个文档,每个页面有5个页面),滚动工作非常好,这要归功于UI虚拟化VirtualizingStackPanel.但是,如果我有大量的页面,我会遇到问题.具有1000页的文档一次仅显示约50个(无论何种适合屏幕),当我向下滚动时,外部ListBox移动到下一个文档,跳过不可见的950页左右.除此之外,VirtualzingWrapPanel应用程序内存确实没有 增加.

我想知道我是否以正确的方式解决这个问题,特别是因为它有点难以解释!我希望能够显示10000个文档,每个文档1000页(仅显示适合屏幕的任何内容),使用UI虚拟化,以及平滑滚动.

如何在显示下一个文档之前确保滚动在文档中的所有页面中移动,并且仍然保持UI虚拟化？滚动条似乎只移动到下一个文档.

表示"文档"和"页面"似乎合乎逻辑 - 使用我当前ListBox在a 中使用a的方法ListBox？

我非常感谢你的任何想法.谢谢.

我已经尝试了几种方法来禁用滚动,包括使用CSS position: fixed,属性overflow-scroll="false"等,但所有方法都失败了.

当我向下滑动时,按钮会向上移动,当我向上滑动时,按钮会向下移动,就像弹跳效果一样.

我可以知道这个问题的任何解决方案吗？非常非常感谢你.

我正面临这个奇怪的问题,看起来像Chrome手机上的一个错误.

我有一个位置的div:固定; 对齐到屏幕的右上角.在桌面上,它在移动设备上工作正常(它保持原位),然而,当我向上或向下滚动时,div正在移动.我制作了一个视频来更好地解释它:

https://www.youtube.com/watch?v=gCgN6ULkcMg

在向上滚动工作正常

在向下滚动时,一个位置为div的div消失在视口外

我试图在小提琴上隔离问题,但无法重现它.因此,我将整个网站封装在一个小提琴中,问题就此停止了.我还是不明白为什么.

网站隔离在一个小提琴:删除*

直播网站:删除*

此外,我在现场网站上对不同的设备进行了一些测试:

• Chrome移动版:错误
• Chrome桌面:工作正常
• Firefox手机:工作正常
• Safari mobile:工作正常

有人可以解释我为什么Chrome Mobile有这个问题,而其他人没有？

我的立场:固定div看起来像这样:

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

*删除了链接,因为它是客户的网站.解决方案在下面的答案中.

我想要实现的是点击并平滑滚动到底部/指定的div区域,我用hashtag定义就像我认为它应该是这样的.

这是w3school示例中为JQuery编写的实例:https://www.w3schools.com/jquery/tryit.asp ？ filename = tryjquery_eff_animate_smoothscroll

我做的是从这个答案中窥视:Angular2使用Hashtag路由到页面锚点

但我真的不明白答案,答案看起来像这样:

这部分是HTML部分:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

在这之下,router.navigate是我应该把代码放在哪里？component.ts对吗？但我如何访问此功能？我应该实施(点击)？

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

在这之下,我得到它,它应该写在我的component.ts:

** Add Below code to your component to scroll**

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

什么是"somepath"是什么意思？我应该在我的路线中添加路线.对吗？通常,我在这里添加一个新的路径,例如: …