相关疑难解决方法(0)
如何禁用外部元素的滚动？
我在页面中有一个垂直滚动的div也可以垂直滚动.
当使用鼠标滚轮滚动子div并到达滚动条的顶部或底部时,页面(正文)开始滚动.当鼠标在子div上时,我希望页面(正文)滚动被锁定.
这个SO帖子(向下滚动到所选答案)很好地证明了这个问题.
这个SO问题与我的问题基本相同,但选定的答案会导致我的页面内容在滚动条消失并重新出现时明显地水平移动.
我认为可能有一个利用event.stopPropagation()的解决方案,但无法获得任何工作.在ActionScript中,这种事情可以通过在子事件上放置一个鼠标轮处理程序来解决,该子事件在事件到达body元素之前调用stopPropagation().由于JS和AS都是ECMAScript语言,我认为这个概念可能会翻译,但它似乎没有用.
是否有解决方案可以防止我的页面内容移动？最有可能使用stopPropagation而不是CSS修复？JQuery的答案和纯JS一样受欢迎.
推荐指数
解决办法
查看次数
如何防止fancybox-2后面的页面滚动
我们使用fancybox2来显示图像.一切都很好,但是当更大的图像显示在fancybox中时,后面的页面会滚动到顶部.关闭fancybox后,用户必须向下滚动到打开盒子的位置.fancybox2站点上的示例不显示此行为.我无法找到,实现这一目标的区别在哪里.
fancyOptions = {
type: 'image',
closeBtn: false,
autoSize: false,
scrolling: 'no',
type: 'image',
padding: [10,10,10,10],
beforeLoad: function(){
this.title = getTitle(this);
this.href = $(this.element).closest('a').attr('href');
},
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.7)'
},
},
title: {
type: 'inside'
}
}
};
我们使用fancybox2作为require.js中的模块..fancybox()调用在$(document).ready块中.
那里有2个滚动条,我用css隐藏了一个
.fancybox-overlay {
overflow: hidden !important;
}
推荐指数
解决办法
查看次数
如何在动画完成之前禁用滚动？
我使用此代码滚动到我的页面上的某个元素:
$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);
它的工作原理,但有一个问题,它:当用户向下滚动而滚动剧本了,有一些颤动,因为有在不同的方向上同时有两个滚动命令 - 听起来逻辑性.
我检查了一些具有这种滚动功能的其他网站,没有动摇.那么防止这种情况的诀窍是什么？
推荐指数
解决办法
查看次数
如果悬停div,则停止滚动页面
我有一个可滚动的div,但无论何时到达它的底部/顶部,它都会开始滚动整个页面.这对于快速滚动的用户来说可能很烦人,然后整个页面开始意外滚动.
我需要一些东西,如果你将鼠标悬停在div上,页面就不可滚动了.
当我悬停div时,我通过添加CSS尝试了这个...
body {
overflow:hidden;
}
......它有效,但有一个问题.滚动条消失,看起来有点愚蠢,让它消失/重新出现.有什么方法可以达到相同的效果,但保持滚动条可见？我已经看到它与Facebook聊天完成.
推荐指数
解决办法
查看次数
网站不在Windows Phone中滚动
我已经创建了一个与nodejs集成的响应式网站,它可以在所有设备上正常运行.
但是在Windows Phone IE浏览器中,网页没有向下滚动,我不知道是什么导致了这一点.
/*css*/
@media (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
/*js*/
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
响应性在Windows Phone上存在一些问题,因此我使用上述代码补丁来解决问题.但滚动问题仍然存在,有人知道如何解决这个问题吗？
推荐指数
解决办法
查看次数
阻止滚动子元素以在Angular 2中传播
这是经典之作.您有父元素和子元素.子元素绝对定位,您希望用户滚动其内容.但是,当您到达子元素的底部时,父元素(也允许有滚动条)开始滚动.那是不可取的.我想重现的基本行为是"纽约时报"评论部分.对于例如:
允许正文向下滚动,但当你在评论部分的底部时,向下滚动不会做任何事情.我认为在这种情况下的主要区别在于,当光标位于body元素上方时,我想让用户向下滚动.其他方法需要向正文添加一个类以防止正文中的任何滚动事件.我想我可以在Angular 2中使用一些Javascript来做到这一点,但这是我到目前为止失败的尝试:
我的子组件中有一个自定义指令:
<child-element scroller class="child"></child-element>
并且该指令应该停止将scroll事件传播到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();
})
}
}
它实际上会监听事件但不会阻止传播.
演示:向下滚动数字列表,当您到达底部时,其父元素开始向下滚动.那就是问题所在.
如果您有其他方法可以实现此目的,请告诉我.
谢谢
更新:基于GünterZöchbauer提供的答案,我试图在用户到达底部时阻止车轮事件.这基本上是我在这个更新的演示中到目前为止所拥有的:
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; …推荐指数
解决办法
查看次数
使用javascript禁用中间点击滚动
背景:我正在创建一个让人联想到whenisgood.net的表,因为它具有click-n-drag切换表元素.当左,中,右鼠标按钮激活mousedown事件时,我想调用不同类型的切换代码.
通过使用JQuery,我有一个良好的开端.
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
在toggle()我可以e.which用来确定点击了什么按钮的函数中.
妙语:我用e.preventDefault()希望将停止滚动的中间点击默认行为.它没有.我该怎么做才能阻止滚动动作激活？
推荐指数
解决办法
查看次数
禁用Chrome在iPhone上的即时刷新功能
我正在我的网站上实现一个绘图应用程序,并尝试在用户绘制画布时防止过度滚动.尽管尝试了几种报告的解决方案,但我无法禁用Chrome的pull-to-refresh.
根据https://developers.google.com/web/updates/2017/11/overscroll-behavior,以下一行css应该可以解决这个问题..即时刷新和烦人的用户体验仍然存在.有任何想法吗？
<!DOCTYPE html>
<html>
<style type="text/css">
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
</style>
<body>
<h1>Simple Site</h1>
</body>
<script type="text/javascript">
</script>
</html>
推荐指数
解决办法
查看次数
无法用 e.preventDefault() 停止页面滚动；
我想用 jquery 完全禁用页面上的滚动（不是正文溢出：隐藏）。
我认为这会起作用，但由于某种原因它不起作用。
$( window ).on( "scroll", function(e) {
e.preventDefault();
});
推荐指数
解决办法
查看次数
函数打字稿后停止滚动事件
是否可以在函数之后阻止任何进一步的滚动事件。
我想生成一个效果，您可以在其中向下滚动站点，如果您位于该站点的底部，则可以进一步滚动，但是会从左侧出现一个新站点 - 就像向左滚动一样。这个新页面带有动画，所以我不想在到达页面底部时直接触发它。
我正在设置超时，只要你到达底部：
this.timeoutUnitBottom = setTimeout(() => this.unitBottom = true, 1000);
并且动画只会在 this.unitBottom==true 时触发。所以你滚动到底部，然后在 1 秒后你可以再次滚动，下一个站点将从左侧出现。
我的问题：如果你在 mac 上像我一样滚动，即使你不触摸触摸板，你的滚动事件也会继续。这通常会在休闲页面上生成平滑滚动，但在这里可能是您滚动到底部，setTimeout 触发并且您的滚动事件在那一秒后仍会触发。
所以：在你抬起你的手指（甚至在任何其他计算机上，我不知道这些机制）后，是否有可能在 mac 上停止正在进行的滚动事件
这可能是一个无法解决的问题，因为通常你不能改变计算机的输入，但也许你们中的一些人会有一些想法。
真诚的，山姆
编辑
我认为所有回答我问题的人都没有明白我确实需要滚动事件并且不能简单地禁用它。唯一有帮助的是我的问题下的评论。
推荐指数
解决办法
查看次数
标签 统计
scroll ×7
javascript ×5
jquery ×5
angular ×2
html ×2
chrome-ios ×1
css ×1
css3 ×1
dom-events ×1
fancybox ×1
fancybox-2 ×1
html5 ×1
macos ×1
typescript ×1