相关疑难解决方法(0)

如何暂时禁用滚动?

我正在使用scrollTo jQuery插件,并想知道是否有可能通过Javascript临时禁用滚动窗口元素?我想要禁用滚动的原因是当你滚动时scrollTo是动画,它变得非常丑陋;)

当然,我可以做一个$("body").css("overflow", "hidden");然后在动画停止时将其恢复为自动,但如果滚动条仍然可见但不活动会更好.

javascript jquery scroll

412
推荐指数
14
解决办法
67万
查看次数

禁用所有移动设备中的滚动

这听起来应该是互联网上的解决方案,但我不知道为什么我找不到它.我想在移动设备上禁用水平滚动.基本上试图实现这个目标:

body{
   overflow-x:hidden  // disable horizontal scrolling.
}
Run Code Online (Sandbox Code Playgroud)

这可能是相关的信息:我的头标记也是如此,因为我也不希望用户能够缩放:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Run Code Online (Sandbox Code Playgroud)

谢谢

css iphone mobile android scroll

57
推荐指数
7
解决办法
13万
查看次数

jQuery或Javascript - 如何禁用窗口滚动而不溢出:隐藏;

嗨是否可以在不使用overflow:hidden;我悬停元素的情况下禁用窗口滚动?

我试过:

$('.chat-content').on('mouseenter',function(){
    $(document).scroll(function(e){
        if(!$(e).hasClass('.chat-content'))
        e.stopPropagation();
        e.preventDefault();
    });
});
Run Code Online (Sandbox Code Playgroud)

我的意思是,我想留下可见的滚动条,但当我滚出元素我用鼠标结束时,窗口不会滚动,而我已经结束的元素可以滚动

所以禁用滚动身体,但不禁用元素我没有使用CSS

这是我做的另一个尝试:http://jsfiddle.net/SHwGL/

javascript css jquery scroll

27
推荐指数
2
解决办法
12万
查看次数

正文设置为溢出-y:隐藏但页面仍可在Chrome中滚动

overflow-y在Chrome中遇到了该属性的问题.即使我已将其设置为hidden,我仍然可以使用鼠标滚轮滚动页面.

这是我的代码:

html,
body {
  overflow-y: hidden;
}

#content {
  position: absolute;
  width: 100%;
}

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div id="content">
    <div class="step">this is the 1st step</div>
    <div class="step">this is the 2nd step</div>
    <div class="step">this is the 3rd step</div>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

有人知道如何阻止Chrome中的垂直滚动吗?

谢谢!

css scroll google-chrome overflow scrollbar

23
推荐指数
3
解决办法
9万
查看次数

如何暂时锁定网页的滚动?

如何在显示对话框时暂时锁定网页的滚动?我有一个对话框,我想在停用覆盖的网页滚动启用滚动.

是否有js命令暂时禁用滚动?

html javascript

14
推荐指数
3
解决办法
4万
查看次数

完全禁用网页滚动

我想禁用我的网页滚动,但完全不是禁用滚动条

overflow: hidden
Run Code Online (Sandbox Code Playgroud)

不管用.

由于边缘上的"软滚动",此解决方法也不适用于Mac.它将显示一个可怕的摇晃动画:

window.onscroll = function () {
window.scrollTo(0,0);
}
Run Code Online (Sandbox Code Playgroud)

有没有其他方法可以完全禁用滚动?

html javascript css

14
推荐指数
1
解决办法
7万
查看次数

jQuery simplemodal禁用滚动

我在页面上滚动内容超过2000像素.

如果用户单击div在简单模式窗口中弹出滚动内容.现在我的客户端希望在模态窗口启动时使原始页面不可滚动.(当然模态应该仍然是可滚动的.)

它甚至可能吗?

编辑:我已经尝试了你的建议.基本上它可以工作,但问题有点复杂:

$(".foReadMoreLink a").click(function(){
    if ($('#modalBox').length == 0)
    $('body').append('<div style="display:none" id="modalBox"></div>')
    $('body').css({'overflow':'hidden'});
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
        $('#modalBox').html(data).modal({overlayClose:'true'});
    })
    return false;
});
Run Code Online (Sandbox Code Playgroud)

我在链接上使用return false,因此没有JavaScript的机器人和用户(是的,那是2%)可以打开文章.使用上面的代码它按预期工作,但在关闭模式后我必须返回滚动条但这段代码不起作用:

$(".foReadMoreLink a").click(function(){
    if ($('#modalBox').length == 0)
    $('body').append('<div style="display:none" id="modalBox"></div>')
    $('body').css({'overflow':'hidden'});
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){
        $('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'});
    })
    return false;
});
Run Code Online (Sandbox Code Playgroud)

jquery scroll simplemodal

13
推荐指数
3
解决办法
2万
查看次数

如何禁用网页中的滚动条?(不是HIDE滚动条)

使用:

$('body,html').css("overflow","hidden");
Run Code Online (Sandbox Code Playgroud)

页面中的滚动条能够完全隐藏.但是我希望滚动条在某些AJAX事件中被禁用.后来使用:

$('body,html').css("overflow","visible");

在我的AJAX成功中,我不得不再次滚动整页.

(就像从scorllbar中删除滚动框并禁用滚动箭头一样)但是仍然会在窗口中显示滚动条.这可以防止同时改变页面宽度.

有没有可能这样做?任何帮助都是适当的.提前致谢.

html css

13
推荐指数
2
解决办法
6万
查看次数

防止窗口垂直滚动,直到div的水平滚动到达其末端

我有一个可以正常(垂直)滚动的页面,并且我希望有一个div可以通过鼠标滚轮向下滚动,然后在完成水平滚动后恢复垂直滚动。这就是我要完成的工作。

  • 页面正常滚动(垂直)
  • 到达div #scroll后,我希望页面滚动停止,并且希望#scroll中的内容垂直滚动
  • 滚动到#scroll的末尾后,我想恢复正常的页面滚动(垂直)。

我尝试了一些解决方案,但遇到以下问题

  • 当我水平#scroll内容时,垂直页面滚动不会停止
  • 当我停止垂直滚动并到达水平滚动的末尾时,我必须滚动50次才能离开该div。

到目前为止,这就是我所拥有的...

var scroller = {};
scroller.e = document.getElementById("scroll");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = - 30 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#scroll').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('.box-wrap').width()) {
        pst = $('.box-wrap').width();
    }

    $('#scroll').scrollLeft(pst);

    return …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

11
推荐指数
4
解决办法
1314
查看次数

检查元素是否完全可见,然后停止滚动

图解说明问题

我正在使用FullSlider.js来创建一个完整的幻灯片网页.如果红色元素完全可见,我需要浏览器来阻止滚动事件(意思是:窗口没有移动,但我能够接收动作),而且在我做了一些东西后我想再次启用滚动.

这就是我到目前为止所做的:

我读了很多关于这个的东西,并尝试了更多的解决方案,如:停止滚动:1.用jquery停止滚动网页根本不起作用

  1. 如何以编程方式禁用页面滚动与jQuery确实停止滚动,但不能再次启用滚动

  2. 事件阻止默认,在chrome中工作正常,但在firefox中不太好

检查元素是否可见:

滚动后检查元素是否可见

我使用上面的解决方案并尝试:

  1. 检查红色元素是否可见(不起作用)
  2. 检查红色元素上方的小跨度是否可见(效果不佳)
  3. 检查红色元素下方的小跨度是否可见(效果不佳)
  4. 检查元素上方和下方的小跨度是否可见(根本不起作用)

  5. 尝试了一下关于获取红色元素的scrollTop并检查bodys scrollTop是否相等或接近的想法

实际上2.解决方案确实运行得很好,但我只是无法弄清楚我需要补偿"固定标题导航"的偏移量.

目前我正在使用"isScrolledIntoView"来检测位置是否合适(在大屏幕上运行良好,在小屏幕上根本不起作用).对于停止滚动,我使用以下hack:

CSS:.scrollHack {position:static; 溢出:隐藏; }

JS:

  $(document).on('mousewheel', function(event, delta) {
      // stopScroll and isStopped are booleans delivered by another script
      if(isScrolledIntoView($("#s3")))
      {
        isStopped = false; 
        if(delta >= 0) {
         $('#s3').get(0).contentWindow.car.next(); //  car.next();
        }
        else{
         $('#s3').get(0).contentWindow.car.previous(); 
        }    
        stopScroll = $('#s3').get(0).contentWindow.isStopped; 
      }
     if(!stopScroll && isScrolledIntoView($("#s3")))
     {
      event.preventDefault(); 
      $("body").addClass("scrollHack");
     }
     else
     {
          $("body").removeClass("scrollHack"); 
     }

});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var …
Run Code Online (Sandbox Code Playgroud)

javascript jquery scroll

8
推荐指数
1
解决办法
2629
查看次数