草庐IT

javascript - 禁用水平滚动；但允许垂直滚动

coder 2024-05-08 原文

我正在尝试禁用网站上的水平滚动； 但允许垂直滚动。

我有一个脚本，它通过向左滑动页面的“主体”并显示更多内容来像 slider 一样工作。然而，这会在右侧产生额外的空白空间。

我需要禁用水平滚动，这样用户就看不到这个空白区域。我尝试了以下脚本，但它禁用了水平和垂直滚动:

window.onscroll = function () {
     window.scrollTo(0,0);
}

我已经尝试过 overflow-x: hidden 但是当 body 的宽度是动态的而不是静态的时候这不起作用。

问题:

有没有办法修改上面的脚本来禁用水平滚动并保持垂直滚动？

最佳答案

您差一点就拿到了。您需要获取文档——或窗口——并绑定(bind)滚动条:然后您可以检查scrollLeft更新为大于 0 并将 scrollLeft 设置为 0。

下一段代码运行良好:

$(function() {

    var $body = $(document);
    $body.bind('scroll', function() {
        // "Disable" the horizontal scroll.
        if ($body.scrollLeft() !== 0) {
            $body.scrollLeft(0);
        }
    });

});

如果你想禁用元素的水平滚动(例如div)你只需要替换$(document)通过 $("#yourElementID")

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; to hide the horizontal scroll.

And will be like if there were no horizontal scrolling.

关于javascript - 禁用水平滚动；但允许垂直滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22678482/

javascript滚动strongcodesectionjquerydom

有关javascript - 禁用水平滚动；但允许垂直滚动的更多相关文章

  1. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  2. python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML？ - 2

    是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案

  3. ruby - 在 Ruby 中，垂直线是什么？ - 2

    1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru

  4. ruby-on-rails - 禁用设备的 :confirmable on-the-fly to batch-generate users - 2

    Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？ 最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2

    我正在使用DMOZ的listofurltopics，其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:

  7. ruby - 为什么允许在 Ruby 类之外定义全局方法？ - 2

    我读过这个:Let’sstartwithasimpleRubyprogram.We’llwriteamethodthatreturnsacheery,personalizedgreeting.defsay_goodnight(name)result="Goodnight,"+namereturnresultend我的理解是，方法是定义在类中的函数或子程序，可以关联到类(类方法)或对象(实例方法)。那么，如果它不是在类中定义的，怎么可能是方法呢？ 最佳答案 当你在Ruby中以这种方式在全局范围内定义一个函数时，它在技术上变成了Obje

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 如何在 Rails 3 中禁用 XML 解析 - 2

    我想禁用HTTP参数的自动XML解析。但我发现命令仅适用于Rails2.x，它们都不适用于3.0:config.action_controller.param_parsers.deleteMime::XML(application.rb)ActionController::Base.param_parsers.deleteMime::XMLRails3.0中的等价物是什么？ 最佳答案 根据CVE-2013-0156的最新安全公告你可以将它用于Rails3.0。3.1和3.2ActionDispatch::ParamsParser::

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐