我正在使用scrollTo jQuery插件,并想知道是否有可能通过Javascript临时禁用滚动窗口元素?我想要禁用滚动的原因是当你滚动时scrollTo是动画,它变得非常丑陋;)
当然,我可以做一个$("body").css("overflow", "hidden");然后在动画停止时将其恢复为自动,但如果滚动条仍然可见但不活动会更好.
这听起来应该是互联网上的解决方案,但我不知道为什么我找不到它.我想在移动设备上禁用水平滚动.基本上试图实现这个目标:
body{
overflow-x:hidden // disable horizontal scrolling.
}
Run Code Online (Sandbox Code Playgroud)
这可能是相关的信息:我的头标记也是如此,因为我也不希望用户能够缩放:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Run Code Online (Sandbox Code Playgroud)
谢谢
嗨是否可以在不使用overflow:hidden;我悬停元素的情况下禁用窗口滚动?
我试过:
$('.chat-content').on('mouseenter',function(){
$(document).scroll(function(e){
if(!$(e).hasClass('.chat-content'))
e.stopPropagation();
e.preventDefault();
});
});
Run Code Online (Sandbox Code Playgroud)
我的意思是,我想留下可见的滚动条,但当我滚出元素我用鼠标结束时,窗口不会滚动,而我已经结束的元素可以滚动
所以禁用滚动身体,但不禁用元素我没有使用CSS
这是我做的另一个尝试:http://jsfiddle.net/SHwGL/
我overflow-y在Chrome中遇到了该属性的问题.即使我已将其设置为hidden,我仍然可以使用鼠标滚轮滚动页面.
这是我的代码:
html,
body {
overflow-y: hidden;
}
#content {
position: absolute;
width: 100%;
}
.step {
position: relative;
height: 500px;
margin-bottom: 500px;
}Run Code Online (Sandbox Code Playgroud)
<body>
<div id="content">
<div class="step">this is the 1st step</div>
<div class="step">this is the 2nd step</div>
<div class="step">this is the 3rd step</div>
</div>
</body>Run Code Online (Sandbox Code Playgroud)
有人知道如何阻止Chrome中的垂直滚动吗?
谢谢!
如何在显示对话框时暂时锁定网页的滚动?我有一个对话框,我想在停用覆盖的网页滚动后启用滚动.
是否有js命令暂时禁用滚动?
我想禁用我的网页滚动,但完全不是禁用滚动条
overflow: hidden
Run Code Online (Sandbox Code Playgroud)
不管用.
由于边缘上的"软滚动",此解决方法也不适用于Mac.它将显示一个可怕的摇晃动画:
window.onscroll = function () {
window.scrollTo(0,0);
}
Run Code Online (Sandbox Code Playgroud)
有没有其他方法可以完全禁用滚动?
我在页面上滚动内容超过2000像素.
如果用户单击div在简单模式窗口中弹出滚动内容.现在我的客户端希望在模态窗口启动时使原始页面不可滚动.(当然模态应该仍然是可滚动的.)
它甚至可能吗?
编辑:我已经尝试了你的建议.基本上它可以工作,但问题有点复杂:
$(".foReadMoreLink a").click(function(){
if ($('#modalBox').length == 0)
$('body').append('<div style="display:none" id="modalBox"></div>')
$('body').css({'overflow':'hidden'});
$.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
$('#modalBox').html(data).modal({overlayClose:'true'});
})
return false;
});
Run Code Online (Sandbox Code Playgroud)
我在链接上使用return false,因此没有JavaScript的机器人和用户(是的,那是2%)可以打开文章.使用上面的代码它按预期工作,但在关闭模式后我必须返回滚动条但这段代码不起作用:
$(".foReadMoreLink a").click(function(){
if ($('#modalBox').length == 0)
$('body').append('<div style="display:none" id="modalBox"></div>')
$('body').css({'overflow':'hidden'});
$.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
$('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'});
})
return false;
});
Run Code Online (Sandbox Code Playgroud) 使用:
$('body,html').css("overflow","hidden");
Run Code Online (Sandbox Code Playgroud)
页面中的滚动条能够完全隐藏.但是我希望滚动条在某些AJAX事件中被禁用.后来使用:
$('body,html').css("overflow","visible");
在我的AJAX成功中,我不得不再次滚动整页.
(就像从scorllbar中删除滚动框并禁用滚动箭头一样)但是仍然会在窗口中显示滚动条.这可以防止同时改变页面宽度.
有没有可能这样做?任何帮助都是适当的.提前致谢.
我有一个可以正常(垂直)滚动的页面,并且我希望有一个div可以通过鼠标滚轮向下滚动,然后在完成水平滚动后恢复垂直滚动。这就是我要完成的工作。
我尝试了一些解决方案,但遇到以下问题
到目前为止,这就是我所拥有的...
var scroller = {};
scroller.e = document.getElementById("scroll");
if (scroller.e.addEventListener) {
scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e;
var delta = - 30 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));
var pst = $('#scroll').scrollLeft() + delta;
if (pst < 0) {
pst = 0;
} else if (pst > $('.box-wrap').width()) {
pst = $('.box-wrap').width();
}
$('#scroll').scrollLeft(pst);
return …Run Code Online (Sandbox Code Playgroud)
我正在使用FullSlider.js来创建一个完整的幻灯片网页.如果红色元素完全可见,我需要浏览器来阻止滚动事件(意思是:窗口没有移动,但我能够接收动作),而且在我做了一些东西后我想再次启用滚动.
这就是我到目前为止所做的:
我读了很多关于这个的东西,并尝试了更多的解决方案,如:停止滚动:1.用jquery停止滚动网页根本不起作用
如何以编程方式禁用页面滚动与jQuery确实停止滚动,但不能再次启用滚动
事件阻止默认,在chrome中工作正常,但在firefox中不太好
检查元素是否可见:
我使用上面的解决方案并尝试:
检查元素上方和下方的小跨度是否可见(根本不起作用)
尝试了一下关于获取红色元素的scrollTop并检查bodys scrollTop是否相等或接近的想法
实际上2.解决方案确实运行得很好,但我只是无法弄清楚我需要补偿"固定标题导航"的偏移量.
目前我正在使用"isScrolledIntoView"来检测位置是否合适(在大屏幕上运行良好,在小屏幕上根本不起作用).对于停止滚动,我使用以下hack:
CSS:.scrollHack {position:static; 溢出:隐藏; }
JS:
$(document).on('mousewheel', function(event, delta) {
// stopScroll and isStopped are booleans delivered by another script
if(isScrolledIntoView($("#s3")))
{
isStopped = false;
if(delta >= 0) {
$('#s3').get(0).contentWindow.car.next(); // car.next();
}
else{
$('#s3').get(0).contentWindow.car.previous();
}
stopScroll = $('#s3').get(0).contentWindow.isStopped;
}
if(!stopScroll && isScrolledIntoView($("#s3")))
{
event.preventDefault();
$("body").addClass("scrollHack");
}
else
{
$("body").removeClass("scrollHack");
}
});
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var …Run Code Online (Sandbox Code Playgroud)