我正在使用scrollTo jQuery插件,并想知道是否有可能通过Javascript临时禁用滚动窗口元素?我想要禁用滚动的原因是当你滚动时scrollTo是动画,它变得非常丑陋;)
当然,我可以做一个$("body").css("overflow", "hidden");然后在动画停止时将其恢复为自动,但如果滚动条仍然可见但不活动会更好.
以下HTML将在div.container的右侧内侧边缘显示滚动条.
是否可以确定滚动条的宽度?
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
Run Code Online (Sandbox Code Playgroud) 对于<html dir="rtl">某些浏览器(Safari,Edge,IE)会自动将滚动条移动到左侧,这是正确的行为:
不幸的是,主流浏览器(Chrome和Firefox)的行为方式不同,滚动条仍位于浏览器的右侧.
是否有可能以编程方式检测(最好使用vanilla JS)哪一侧是滚动条?
UPD(28.09.2018):到目前为止,答案中没有可行的解决方案,人们试图通过使用getBoundingClientRect().left或者检测滚动条位置.offsetLeft,这将无法工作,因为它始终0至少在Edge中独立于滚动条位置.
UPD(15.10.2018):TLDR:没办法.
似乎浏览器不提供用于检测滚动条侧的API.在下面的答案中,有插入假人的技巧div并计算该div中的滚动条的位置.我不能将这些技巧视为答案,因为文档滚动条可以通过多种方式定位(<html dir="rtl">RTL版本的操作系统,浏览器设置等)
使用:
$('body,html').css("overflow","hidden");
Run Code Online (Sandbox Code Playgroud)
页面中的滚动条能够完全隐藏.但是我希望滚动条在某些AJAX事件中被禁用.后来使用:
$('body,html').css("overflow","visible");
在我的AJAX成功中,我不得不再次滚动整页.
(就像从scorllbar中删除滚动框并禁用滚动箭头一样)但是仍然会在窗口中显示滚动条.这可以防止同时改变页面宽度.
有没有可能这样做?任何帮助都是适当的.提前致谢.
我无法找到解决方案,这里有一个问题,但答案不是很有用(至少对我来说).
我有一个JavaScript模式弹出窗口,通过在页面上放置透明div来禁用背景上的所有内容.它还通过将溢出设置为隐藏来禁用滚动,并且必须这样做,因为页面可以使用鼠标滚轮滚动,否则会分散用户的注意力.
问题是,当隐藏和显示滚动条时,页面会调整大小并且效果很难看.此外,我的页面设计的方式是,如果我停止调整大小,那也是丑陋的.
我想要的是禁用滚动条,但保持可见(页面内容比屏幕适合的长).这在CSS中是否有可能?
这是jsFiddle以便更好地理解:http://jsfiddle.net/BzYcZ/
我有一些有滚动条的div.
我想要的是当我使用鼠标滚动到达div的末尾时停止滚动而不是滚动整个页面.
发生的事情是,当我到达div的末尾时,整个页面开始滚动.
我知道这是浏览器驱动的,但是有一些JS事件可以处理这种情况并阻止滚动整个页面,因为我的光标在这个div元素上.
编辑:
我想能够滚动整个页面,但只有当我的鼠标不在这个div时.
解
.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
这是JavaScript部分:
$('.small_content').hover(
function () {
$('body').addClass('noscroll');
},
function () {
$('body').removeClass('noscroll');
}
);
Run Code Online (Sandbox Code Playgroud)
这里是工作jsFiddle的链接:http://jsfiddle.net/BzYcZ/3/
我有一个游戏,玩家可以使用箭头键移动,当我点击向上或向下箭头时,屏幕也会移动。有办法禁用这个吗?
我正在使用以下内容:本地 HTML 页面、Google Chrome、Windows
(仅供参考 - 整个页面不会一次显示)
这是我的代码:
function moveCharacter()
{
// left arrow
if (keys[37])
{
move("left");
}
// up arrow
if (keys[38])
{
move("up");
}
// right arrow
if (keys[39])
{
move("right");
}
// down arrow
if (keys[40])
{
move("down");
}
}
document.body.addEventListener("keydown", function(e)
{
keys[e.keyCode] = true;
moveCharacter();
});
document.body.addEventListener("keyup", function(e)
{
keys[e.keyCode] = false;
});
Run Code Online (Sandbox Code Playgroud)