需要阻止用户手动滚动网页。 (仅使用内部链接导航)

时间:2011-07-01 23:57:30

标签: javascript jquery html css

我目前正在设计一个非常垂直的网页,我的想法是用户不会在页面上滚动,但只有当他们点击带有内部锚点(href="#someDiv")的链接时,页面才会自动向下滚动到那一节。

这样页面的元素就会被组织成一个包,并且用户点击上下移动到单个页面的一个部分或另一个部分。

我已将该页面上传到以下网址: DWS - Prototype

该页面相当简单,我使用平滑滚动jQuery插件进行自动滚动。我想要的只是让用户不能自己徘徊。

我尝试使用overflow:hidden,并寻找javascript或jQuery来完成这项工作,但似乎找不到可行的解决方案。隐藏溢出可防止页面加载到屏幕之外,因此您无法链接到页面的其他元素。

我还没有真正测试过Mac OS之外的HTML / CSS,但它在Safari,Firefox和Chrome上运行良好。

3 个答案:

答案 0 :(得分:5)

您可以使用以下css属性

禁用页面上的滚动条
body{overflow: hidden;}

这将禁用滚动条和鼠标滚轮(我不确定Pg向上和向下按钮)

答案 1 :(得分:0)

虽然你肯定有一个有趣的概念,但我认为很难实现你想要的方式。如果我将浏览器窗口的高度设置得如此之小以至于我看不到您的导航菜单并且我也无法滚动,会发生什么?有可能我只是厌倦了你的网站并离开。

当用户看到垂直滚动条时,他们希望能够向上和向下滚动。从用户那里采取这种方式更有可能使他们感到沮丧和愤怒,而不是他们认为“这真的很酷”。

话虽如此,你可以加载jQuery并执行类似的操作:

$(document).ready(function() {

    $('html, body').scroll(function(e) {
         e.preventDefault();
    });

});

这可以防止滚动条上升或下降。 免责声明:我没有对此进行测试。

答案 2 :(得分:0)

我建议你让部分(部分)可折叠。例如。 like here