相关疑难解决方法(0)

我有一个小"浮动工具箱" - 一个div与position:fixed; overflow:auto.工作得很好.

但是当在该框内滚动(使用鼠标滚轮)并到达底部或顶部时,父元素"接管""滚动请求":工具框后面的文档滚动.
- 哪个很烦人而不是用户"要求".

我正在使用jQuery并认为我可以使用event.stoppropagation()来阻止此行为:
$("#toolBox").scroll( function(event){ event.stoppropagation() });

它确实进入了函数,但仍然无论如何传播(文档滚动)
- 在SO(和Google)上搜索这个主题非常困难,所以我不得不问:
如何防止滚动事件的传播/冒泡？

编辑:
工作解决方案感谢amustill(以及Brandon Aaron的mousewheel-plugin:https:
//github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js

$(".ToolPage").bind('mousewheel', function(e, d)  
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    }
    else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});

当我以纵向模式启动我的应用程序时,它工作正常.然后我旋转到风景,它扩大了规模.为了使其能够在横向模式下正确缩放,我必须双击两次,首先进行缩放(正常的双击行为),然后再一次缩放(再次,正常的双击行为) .当它缩小时,它会缩小到横向模式的正确新比例.

切换回肖像似乎更加一致; 也就是说,它处理缩放,以便在方向变回肖像时缩放比例正确.

我想弄清楚这是不是一个错误？或者如果这是可以用JavaScript修复的东西？

使用视口元内容,我将初始比例设置为1.0,我没有设置最小或最大比例(我也不想).我将宽度设置为设备宽度.

有任何想法吗？我知道很多人会很感激有一个解决方案,因为它似乎是一个持久的问题.

我正在编写一个HTML5 <canvas>项目,该项目涉及使用滚轮放大和缩小图像.我想像谷歌地图一样向光标缩放,但我完全迷失了如何计算动作.

我有什么:图像x和y(左上角); 图像宽度和高度; 光标x和y相对于画布的中心.

wheelFirefox> = 17中的事件有一个deltaMode属性.使用我正在使用的OS /鼠标,它被设置为1(或DOM_DELTA_LINE).此设置意味着deltaX和deltaY事件值以行而不是像素来度量.果然,如果我假装增量是像素,滚动速度比通常在Firefox中慢得多.

相比之下铬31使用deltaMode的0(或DOM_DELTA_PIXEL),这允许我来模拟与正常速度滚动.

如果我可以将线值转换为像素值,我将全部设置.但我找不到关于"线"是什么的文件.我试图改变font-size和line-height在Firefox中,这并没有改变滚动行为.

任何人都知道如何定义"线"？W3C只是说,"这是许多表单控件的情况."

W3C deltaMode

MDN WheelEvent

MDN wheel

编辑:这是一个演示奇怪的小提琴.当Firefox处于DOM_DELTA_LINE模式时,像素和线条之间没有一致的比例 - 它遍布整个地方.当我切换到使用触控板而不是鼠标,导致Firefox切换到DOM_DELTA_PIXEL模式时,也没有一致的比例.另一方面,在Chrome 31中,该比率在DOM_DELTA_PIXEL模式下几乎总是非常接近1:1 .

Chromium问题:实现DOM3轮事件

Bugzilla bug:实现DOM3轮事件

更新:通过在Firefox鼠标滚轮的单蜱滚动,其中deltaMode是DOM_DELTA_LINE,像素增量取决于CSS font-size,但不能在line-height.看一下这个小提琴演示.只有在非常缓慢地打勾时才会出现这种情况.对于速度或动量,线对像素比率在任何特定实例或聚合中都是不可预测的.据我所知,使用DOM_DELTA_LINE模式中提供的增量测量无法模拟Firefox的滚动行为.

在DOM_DELTA_PIXEL模式中,行为几乎完全像素.也就是说,滚动的实际像素与报告的像素增量值之间的比率几乎正好为1,这在相同的小提琴中得到证明.

我向Mozilla提交了一个错误,认为wheel事件在DOM_DELTA_LINE模式下的行为没有用,因为它不可预测(即,它是一个单位和数量都是变量的等式).该问题已被标记为无效,因为预期的行为是wheel …

我有一种情况,例如,如果用户的滚动将导致scrollTop发生1000像素的变化,我想提前知道.

完美的例子是iCalendar对用户滚动的控制.无论你在iCalendar应用程序中滚动多么努力,你可以滚动的最远的是下个月或上个月.

我目前有一个非常强硬的解决方案来限制滚动行为,它只考虑用户当前滚动的位置.

MyConstructor.prototype._stopScroll = function(){

    //Cache the previous scroll position and set a flag that will control
    //whether or not we stop the scroll
    var previous = this._container.scrollTop;
    var flag     = true;

    //Add an event listener that stops the scroll if the flag is set to true
    this._container.addEventListener('scroll', function stop(){
        if(flag) {
            this._container.scrollTop = previous;
        }
    }.bind(this), false);

    //Return a function that has access to the stop function and can remove it
    //as an event listener
    return function(){
        setTimeout(function(){ …

我知道可以上下检测,例如

    function handle(delta) {
    if (delta < 0) {
        alert('down');
} else {
    alert('up');
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;?

但有没有办法用鼠标滚轮检测用户的鼠标是向左还是向右？

我是vanilla javascript的忠实粉丝,目前我正在开发一个项目,我需要在鼠标滚轮上实现平滑滚动.我想用vanilla JS来实现它.我发现了一个关于做一些研究的jQuery片段,如下所示.

$(window).on('mousewheel DOMMouseScroll', function(e) {
   var dir,
   amt = 100;

   e.preventDefault();
   if(e.type === 'mousewheel') {
     dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
   }
   else {
     dir = e.originalEvent.detail < 0 ? '-=' : '+=';
   }      

   $('html, body').stop().animate({
     scrollTop: dir + amt
   },500, 'linear');
});

任何人都可以帮助我,如何在不使用jQuery或任何其他库的帮助程序库的情况下实现平滑滚动.

人们在jQuery中有很多实现.但我想要一个可以用vanilla JS做的最佳实现.这可以在React,Angular和Vue的任何地方实现.

当我尝试获取用户的滚动速度时，我在 Mac 和 Windows 之间得到不一致的结果。

重现

1. 打开此代码沙盒
2. 使用鼠标，向下滚动 1 个“刻度”（使用不具有平滑滚动功能的鼠标）

问题

使用完全相同的硬件（鼠标/显示器）和浏览器（chrome）：

• 在 Windows 上我得到的值为125
• 在 Mac 上我得到的值约为12

我需要一种方法来了解用户滚动的速度，从而为所有操作系统提供可比较的结果。

更多背景信息

• 这适用于“无限画布”类型的应用程序（如tldraw）。我想当用户向后滚动时“缩小”，当用户滚动时“放大”。
• 我想使用滚动速度（而不仅仅是滚动方向），因为否则感觉很笨拙
• 我知道这是可能的，因为Figma可以根据鼠标滚轮速度进行放大/缩小。虽然他们使用 webgl 所以不确定他们是否可以访问正常轮子事件没有的属性
• 我不能简单地检查 deltaY 是否 > 100，因为在 mac 上，当用户快速滚动时 deltaY 可能会超过 100
• 我尝试了这个问题的所有解决方案。它们都不能跨 mac/windows 运行