[英]Disable horizontal scroll; but allow vertical scroll
I'm trying to disable horizontal scroll on a website;我正在尝试禁用网站上的水平滚动; but allowing vertical scrolling.
但允许垂直滚动。
I have a script which works like a slider by sliding the 'body' of the page left and revealing more contents.我有一个脚本,它通过向左滑动页面的“主体”并显示更多内容来像滑块一样工作。 However this creates extra empty space on the right.
然而,这会在右侧产生额外的空白空间。
I need to disable horizontal scrolling so users don't see this empty space.我需要禁用水平滚动,以便用户看不到这个空白区域。 I tried the following script but it disables both horizontal and vertical scrolling:
我尝试了以下脚本,但它同时禁用了水平和垂直滚动:
window.onscroll = function () {
window.scrollTo(0,0);
}
I have tried overflow-x: hidden
but that doesn't work when the body's width is dynamic and not static.我试过
overflow-x: hidden
但是当身体的宽度是动态的而不是静态的时,这不起作用。
Is there a way to modify the above script to disable the horizontal scrolling and keep vertical scrolling?有没有办法修改上面的脚本来禁用水平滚动并保持垂直滚动?
You were close to get it. 你很接近它。 You need to get the
document
— or window
— and bind the scroll: then you can check if the scrollLeft
is updated to more than 0 and set the scrollLeft
to 0 . 您需要获取
document
- 或window
- 并绑定滚动:然后您可以检查scrollLeft
是否更新为0以上并将scrollLeft
设置为0 。
The next code works well: 下一个代码效果很好:
$(function() {
var $body = $(document);
$body.bind('scroll', function() {
// "Disable" the horizontal scroll.
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});
});
If you want to disable horizontal scroll for an element ( like div, for instance ) you only need to replace $(document)
by $("#yourElementID")
如果要为元素禁用水平滚动 ( 例如div ),则只需要用
$("#yourElementID")
替换$(document)
$("#yourElementID")
JSFiddle: https://jsfiddle.net/tomloprod/zx1bvdf5/ JSFiddle: https ://jsfiddle.net/tomloprod/zx1bvdf5/
NOTE:
注意:
The above script will prevent you scroll horizontally and, in addition, you can use the next CSS style:
overflow-x:hidden;
上面的脚本会阻止你水平滚动,另外,你可以使用下一个CSS样式:
overflow-x:hidden;
to hide the horizontal scroll.隐藏水平滚动。
And will be like if there were no horizontal scrolling.
并且就像没有水平滚动一样。
This should work (CSS): 这应该工作(CSS):
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
在您的包装元素上使用overflow-x:hidden
overflow-x:hidden;
Without JQuery: 没有JQuery:
window.onscroll = function () {
window.scrollLeft = 0;
}
Here is what I did to solve my problem.这是我为解决问题所做的工作。
window.onscroll = function () { window.scrollTo(0,window.scrollY); };
Hope this helps.希望这可以帮助。
You could also jQuery's "on", and check for the deltaX. 你也可以jQuery“on”,并检查deltaX。
$("body").on("wheel", function(e) {
var deltaX = e.originalEvent.deltaX;
if (deltaX !== 100 && deltaX !== -100) {
...do something
}
return false;
});
CSS: CSS:
body {
width: 100vw;
height: 100vh;
overflow: hidden auto;
}
The 100vw/vh
means 100% of the view-port (=window inner) width/height. 100vw/vh
表示100%的视口(=窗口内部)宽度/高度。
The hidden auto
means never show scroll on x and show scroll on y when necessary. hidden auto
装置从不显示x上的滚动,并在必要时显示y上的滚动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.