这是非常简单的HTML页面
<body style="overflow-y: hidden">
...
</body>
此页面的预期行为是:由于阻止了文档的滚动overflow-y: hidden.
除了Safari之外,它可以按预期工作(阻止滚动).
现场演示:https://spotted-chime.glitch.me/
问题是:如何使Safari的行为与其他浏览器相同？
单击图像会显示一个长的滚动模式。问题是，如果您在模式中滚动，也会滚动模式的背面。你如何解决它？
模态是一个组件。这是我的代码：
Carousel.vue
<template>
<div>
<div v-for="(item, index) in photos" :key="index">
<div @click="imgClick(item)" style="cursor:pointer;">
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="item.show = false">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
</div>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
props: {
items: { type: Array, default: () => [] }
},
data() {
return {
photos: {}
}
},
created() {
this.photos = this.items.map(item => {
return { ...item, show: false }
})
},
methods: {
imgClick(item) { …是否可以在函数之后阻止任何进一步的滚动事件。
我想生成一个效果，您可以在其中向下滚动站点，如果您位于该站点的底部，则可以进一步滚动，但是会从左侧出现一个新站点 - 就像向左滚动一样。这个新页面带有动画，所以我不想在到达页面底部时直接触发它。
我正在设置超时，只要你到达底部：
this.timeoutUnitBottom = setTimeout(() => this.unitBottom = true, 1000);
并且动画只会在 this.unitBottom==true 时触发。所以你滚动到底部，然后在 1 秒后你可以再次滚动，下一个站点将从左侧出现。
我的问题：如果你在 mac 上像我一样滚动，即使你不触摸触摸板，你的滚动事件也会继续。这通常会在休闲页面上生成平滑滚动，但在这里可能是您滚动到底部，setTimeout 触发并且您的滚动事件在那一秒后仍会触发。
所以：在你抬起你的手指（甚至在任何其他计算机上，我不知道这些机制）后，是否有可能在 mac 上停止正在进行的滚动事件
这可能是一个无法解决的问题，因为通常你不能改变计算机的输入，但也许你们中的一些人会有一些想法。
真诚的，山姆
编辑
我认为所有回答我问题的人都没有明白我确实需要滚动事件并且不能简单地禁用它。唯一有帮助的是我的问题下的评论。
我想在我的一个页面中禁用滚动.我不想写
scroll(0,0) 要么 scrollTo(0,0)
在滚动事件中,这将产生"跳跃"的性质.我不能有类似的东西
event.preventDefault()
取消活动？
在复习有关StackOverflow上该主题的许多问题和答案时，提供的所有解决方案均无法可靠地工作。所有CSS，JavaScript，jQuery和混合解决方案都至少存在一个缺陷，导致滚动无法有效禁用和/或切换。
我还在网上搜索了很多内容，但没有找到一个好的答案。
到目前为止，我具有此功能：
function toggleScroll(btn, item) {
$(btn).click(function() {
$(item).toggleClass("noscroll");
});
}
...这会将a添加overflow: hidden;到我想要的任何类中onclick，并在第二次单击时将其删除。
问题是，此代码不适用于iOS设备。
如何在iOS设备上使用此功能？
理想情况下，我希望使用纯CSS解决方案。但是我知道这可能是不可能的，尤其是切换组件。
任何JavaScript或jQuery解决方案也都可以。
提前致谢！
我有一个这样定义的可拖动对象：
$("#drag_area a").live("mouseup", function() {
var object = $(this);
var class_array = $(this).attr("class").split(" ");
element(object,class_array);
return false;
}).draggable({
containment: "#drag_area",
grid: [44, 44],
zIndex: 1000
}).each(function(i, item){
});
当我拖动“drag_area a”类型的项目时，如果我在拖动它的同时滚动页面，该项目将从收容中退出...这不是理想的情况，那么我该如何避免这种情况？我可以在拖动过程中禁用页面滚动吗？
我的问题类似于滚动 DIV 元素时如何防止页面滚动？但我想知道是否有一种不需要 jQuery 的 css 和/或 react 方法。
当光标位于一个特定的 div 上时，我想在 mouseWheel 事件上禁用页面滚动。div 是一个放大 mouseWheel 事件的图形，由 React 组件渲染。
我试过 e.preventDefault 但是 chrome 告诉我
由于目标被视为被动，无法在被动事件侦听器中阻止默认
任何人都可以帮忙吗？提前致谢。
编辑：为任何人找到了一个简单的解决方案。
changeScroll(){
let style = document.body.style.overflow
document.body.style.overflow = (style === 'hidden') ? 'auto':'hidden'
}
<div
onMouseEnter={this.changeScroll}
onMouseLeave={this.changeScroll} />
<ReactComponent/>
</div>
这是我第一次在项目中为我实现FancyBox.我已将图像与链接分开.因此,当您将鼠标悬停在图像上时,会出现查看大图像的链接.那里的一切都很好.我的问题是,当点击链接时,窗口会一直跳跃/滚动到顶部.我已经使用jquery通过使用preventDefault来禁用它的默认操作,但这并没有解决我的问题.有什么建议？您可以在www.labpixls.com上看到我想要完成的任务
我需要尽快解决这个问题.我正在创建一个wordpress主题,我打算给wp社区.