禁止body滚动条

最新推荐文章于 2023-06-15 14:06:32 发布
原创 最新推荐文章于 2023-06-15 14:06:32 发布 · 587 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

//禁止滚动条
 $(document.body).css({
   "overflow-x":"hidden",
   "overflow-y":"hidden"
 });
 
 //启用滚动条
 $(document.body).css({
   "overflow-x":"auto",
   "overflow-y":"auto"
 });
  
个人看法
关注
Html body的滚动条禁止与启用
ufryyfdf的博客
11-10 1万+
Html body的滚动条禁止与启用
jquery弹窗时禁止body滚动条滚动的例子
12-13
当弹出一个jq提示窗口的时候，一般窗口右边还会有进度条的情况，禁止进度条...以上这篇jquery弹窗时禁止body滚动条滚动的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
禁用body滚动条的兼容写法
weixin_44283589的博客
04-27 405
注意，这种方法只是禁用了 body 元素的滚动条，而不是禁用整个页面的滚动条。如果需要禁用整个页面的滚动条，可以将上述代码中的 document.body 改为 document.documentElement。在禁用滚动条时，将 position 属性设置为 fixed，并且将 scrollTop 设置为 0，就可以禁用滚动条。在启用滚动条时，将 position 属性和 top 属性设置回原来的值就可以了。
html body上下不超过,Html body的滚动条禁止与启用
weixin_36386962的博客
06-19 261
在写一个在页面中，经验证用户没有登录或session失效时候弹出登录框禁止页面滚动用到今天搞了一个功能，上下左右居中，模仿QQ空间里的样式，把横向和纵向滚动条禁止掉代码如下：//禁止滚动条$(document.body).css({"overflow-x":"hidden","overflow-y":"hidden"});//启用滚动条$(document.body).css({"overflow...
body 标签禁止横纵滚动条
PerfectUrl的博客
08-07 1713
全禁止 禁止纵向滚动条 禁止纵向滚动条
手机弹窗 禁止body滚动
04-09
在本篇文章中，我们将详细探讨如何实现“手机弹窗禁止body滚动”的效果。 首先，我们需要理解H5页面的滚动机制。在HTML5中，页面的滚动行为主要由`body`元素或设置`overflow`属性的容器来控制。默认情况下，如果...
解决layui数据表格table的横向滚动条显示问题
10-16
} /*禁止刷新后出现横向滚动条*/ ``` 这段代码的作用是设置body元素始终有垂直滚动条，无论内容是否超出可视区域。通过这种做法，可以避免页面加载时横向滚动条被浏览器强制隐藏，从而减少或消除横向滚动条出现的...
网站body去除滚动条css样式
tlovet_1314的博客
11-06 1126
body { font:12px Helvetica,Georgia,Arial,sans-serif，宋体; margin:0; padding:0; font-family:"微软雅黑"; background:url(../images/bg1.png) top left repeat-x #0674e5; width:1920px; height: 1080px; } .
webiew滚动条禁用_WebView禁用横向滚动 | 学步园
weixin_36298476的博客
12-30 732
WebView使用总结WebSettings webSettings = webView.getSettings();//设置支持javascriptwebSettings.setJavaScriptEnabled(true);//禁用横向滚动条webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);//加载本地htmlwebVi...
自定义BODY滚动条
zhangjian01361的专栏
05-23 6890
1)body,   div     {         SCROLLBAR-HIGHLIGHT-COLOR:   #FFFFFF;   /*滚动条及箭头的亮边色*/         SCROLLBAR-SHADOW-COLOR:   #E1E1E1;         /*滚动条及箭头的暗边色*/         SCROLLBAR-3DLIGHT-COLOR:   #E1E1E1;      
自定义 body 滚动条
文龙刚的博客
03-03 769
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>自定义滚动条&l.
html去除页面的滑动条
WzhCsdnd的博客
03-11 8510
html去除页面的滑动条的几种方法
3种方式禁用浏览器滚动条
魔侠的沙滩
04-26 7832
在一些场景中，比如弹出一个带滚动条的浮窗，为了避免在操作时触发原生滚动条，这时我们需要禁用掉浏览器的滚动条。 常用的三种方法如下。 方法一 让body不能滚动。 export const forbidBodyScoll = () => { const body = window.document.getElementsByTagName('body')[0]; body.style.overflow = 'hidden'; }; export const allowBodyScol
CSS——设置滚动条出现在body身上
hao_sir
03-16 2484
先看代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } html{ margi...
body{width:100%}但窗口出现滚动条&body的子元素height：100%实际高度未填满整个页面
热门推荐
lamanchas的博客
11-02 1万+
width/height百分比设置参考链接1：width=100%时会出现滚动条的情况 参考链接2：html,body设置高度100%和默认的滚动条问题一：body{width:100%}但窗口出现滚动条代码:<!doctype html> <html> <head> <meta charset="utf-8"/> <title>body{width":100%;}窗口有滚动条</title> <
Vue - 关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题 和双滚动条问题
Muxiu
06-15 3896
关于el-dialog 会让body 标签内的滚动条隐藏，导致窗口抖动的问题。
给body加100vh,100vm出现滚动条的解决方法
DESERTo的博客
12-13 1709
body加100vh和100vm出现滚动条的解决方法
body 的几个禁用属性 解释
weixin_34297704的博客
06-21 387
oncontextmenu="return false" onselectstart="return false" ondragstart="return false" ondragstart="return false" 禁止鼠标在网页上拖动 onselectstart="return false" 禁止鼠标选中文字 oncontextmenu="return false" 在页...
jquery 禁止水平滚动条
最新发布
04-12
<think>好的，我现在需要帮用户解决如何使用jQuery禁用或隐藏水平滚动条的问题。首先，我得回忆一下jQuery的相关方法，以及处理滚动条的常见技巧。用户提到了他们找到的一些引用资料，比如禁用滚动条的方法、美化滚动条的插件，还有去除DataGrid滚动条的CSS方法。不过用户现在想针对水平滚动条进行操作，可能需要不同的方法。 首先，我应该考虑用户的具体需求是什么。禁用水平滚动条可能有几种情况：一种是完全禁止用户通过鼠标滚轮或触摸滑动水平滚动，另一种是隐藏滚动条，使其不可见但可能还能通过其他方式滚动。用户可能希望同时实现这两种效果，或者其中之一。 根据引用[1]中的代码，禁用滚动条的方法是给html元素添加类，然后监听mousewheel和touchmove事件来阻止默认行为。不过这个例子是针对垂直滚动的，可能需要调整来针对水平滚动。例如，在事件处理函数中，判断滚动的方向是否为水平，然后阻止默认行为。 另外，引用[3]提到通过CSS设置overflow-x为hidden来隐藏滚动条。这可能是最简单的方法，直接通过jQuery修改元素的CSS属性。例如，$('body').css('overflow-x', 'hidden'); 这样就可以隐藏水平滚动条。但需要注意，这样可能会影响页面布局，特别是如果有内容溢出的话，用户将无法滚动查看，可能导致内容被截断。 所以，可能需要结合两种方法：用CSS隐藏滚动条，并用JavaScript阻止水平滚动事件。比如，当用户尝试用鼠标滚轮水平滚动时，阻止默认行为。但通常鼠标滚轮主要是垂直滚动，水平滚动可能通过触控板滑动或触摸设备的手势。这时候需要监听wheel事件，检查deltaX值来判断水平滚动，然后阻止默认动作。 此外，引用[2]中的nicescroll插件可以用来美化滚动条，并设置autohidemode，但用户的问题是关于禁用或隐藏水平滚动条，而不是美化。所以可能不需要用到插件，除非用户希望自定义滚动条的行为。 现在需要整合这些思路。可能的解决方案有： 1. 使用CSS隐藏水平滚动条，通过设置overflow-x: hidden。但这样只是隐藏，用户可能还是能通过键盘或其他方式滚动。 2. 使用jQuery监听滚动事件，当检测到水平滚动时阻止默认行为。比如在wheel事件中判断deltaX，并调用preventDefault。 3. 结合以上两种方法，同时隐藏滚动条并阻止滚动事件。 另外，需要考虑不同浏览器的兼容性，比如touchmove事件在移动设备上的处理，可能需要设置passive: false来确保preventDefault有效，如引用[1]中所示。 接下来，具体实现步骤可能如下： 首先，通过CSS隐藏水平滚动条： $('html, body').css('overflow-x', 'hidden'); 然后，监听水平滚动事件，阻止默认行为： $(window).on('wheel', function(e) { if (e.originalEvent.deltaX !== 0) { e.preventDefault(); } }); 但需要注意，deltaX可能在某些情况下不准确，或者用户使用触控板滑动，这时候可能需要更全面的检测。另外，在移动端，可能需要处理touchmove事件，检测水平滑动，并阻止默认行为。 例如，在touchstart时记录初始位置，然后在touchmove时计算水平移动的距离，如果超过一定阈值，则阻止滚动。 或者，像引用[1]那样，直接阻止touchmove的默认行为，但这样可能会影响垂直滚动，所以需要判断方向。 可能更简单的方式是直接禁用overflow-x，并防止所有水平滚动事件。但需要测试不同场景。 此外，用户可能希望只针对特定元素而不是整个页面，所以代码应该允许选择特定的容器。 最后，需要提醒用户注意隐藏滚动条可能导致的内容不可见问题，建议检查内容布局是否适应容器宽度。 总结可能的代码示例： // 隐藏水平滚动条 $('html, body').css('overflow-x', 'hidden'); // 阻止鼠标滚轮水平滚动 $(document).on('wheel', function(e) { if (e.originalEvent.deltaX !== 0) { e.preventDefault(); } }); // 阻止触摸滑动水平滚动 var startX; $(document).on('touchstart', function(e) { startX = e.touches[0].clientX; }); $(document).on('touchmove', function(e) { var currentX = e.touches[0].clientX; if (Math.abs(currentX - startX) > 0) { // 检测水平滑动 e.preventDefault(); } }, { passive: false }); 不过，这样的touchmove处理可能会过于严格，因为任何水平滑动都会被阻止，而垂直滑动不受影响吗？可能需要更精确的判断，比如比较水平移动距离是否大于垂直移动，来决定是否阻止。 或者，直接阻止所有touchmove事件的默认行为，但这会影响整个页面的滚动，可能不是用户想要的。因此，需要根据具体情况调整。 最后，引用用户提供的引用[1]中的方法，可以结合他们的forbidScroll函数，但针对水平滚动进行调整。 可能最终的代码示例是使用CSS隐藏滚动条，并用事件监听阻止水平滚动，同时引用相关的引用资料中的方法，如添加lock类或使用特定的事件处理。</think>### 如何用 jQuery 禁用或隐藏水平滚动条？ #### 方法一：通过 CSS 隐藏水平滚动条 直接修改 CSS 的 `overflow-x` 属性，可彻底隐藏水平滚动条，但需注意内容溢出可能导致显示不全[^3]： ```javascript // 隐藏页面整体水平滚动条 $('html, body').css('overflow-x', 'hidden'); // 隐藏特定容器的水平滚动条（示例选择器为 .container） $('.container').css('overflow-x', 'hidden'); ``` #### 方法二：动态阻止水平滚动事件 通过监听滚动事件，阻止水平方向的滚动行为[^1]： ```javascript // 阻止鼠标滚轮水平滚动 $(window).on('wheel', function(e) { if (e.originalEvent.deltaX !== 0) { e.preventDefault(); } }); // 阻止触摸滑动水平滚动 var startX; $(document).on('touchstart', function(e) { startX = e.touches[0].clientX; }); $(document).on('touchmove', function(e) { var deltaX = e.touches[0].clientX - startX; if (Math.abs(deltaX) > 5) { // 检测到水平滑动时阻止 e.preventDefault(); } }, { passive: false }); ``` #### 方法三：结合 CSS 和事件监听（推荐） 同时隐藏滚动条并禁止滚动行为： ```javascript // 隐藏滚动条 $('body').css('overflow-x', 'hidden'); // 禁止水平滚动事件 $(window).on('scroll', function() { $(this).scrollLeft(0); // 强制重置水平滚动位置 }); ``` #### 注意事项 1. **内容适配**：隐藏滚动条后需确保内容宽度不超出容器，否则会导致内容截断。 2. **兼容性**：移动端需使用 `{ passive: false }` 确保 `preventDefault` 生效[^1]。 3. **局部控制**：若需针对特定容器，替换选择器（如 `$('.container')`）即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值