相关疑难解决方法(0)

有没有办法使用javascript获取用户设备宽度,而不是视口宽度？

正如我所说,CSS媒体查询提供了这一点

@media screen and (max-width:640px) {
    /* ... */
}

和

@media screen and (max-device-width:960px) {
    /* ... */
}

如果我的目标是横向智能手机,这将非常有用.例如,在iOS max-width:640px上,即使在iPhone 4上,也会针对横向和纵向模式进行声明. 据我所知,这不是Android的情况,因此在此实例中使用设备宽度成功地定位两个方向,没有针对桌面设备.

但是,如果我基于设备宽度调用javascript绑定,我似乎仅限于测试视口宽度,这意味着额外的测试,如下所示,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

考虑到设备宽度可用于css,这对我来说似乎并不优雅.

我有一个关于我目前工作的例子:https://jsfiddle.net/pv5xroLc/

我的问题是,当我的示例中的表完全滚动到右侧时,即使无法进一步滚动,淡入渐变仍然覆盖了我的表的一部分,因此它使得最后一列更难以阅读.我想知道隐藏这个渐变的最佳解决方案是什么,同时仍然清楚表明该表可以水平滚动(这将出现在移动设备上).

目前,我的html结构如下:

<div class="fader">
    <div class="scrollable">
       *content*
    </div>
</div>

该.fader元素有一个::after伪元素,其中包含"推子",它是一个绝对定位的元素,我用它来表示元素可以水平滚动.该.scrollable元素是一个水平滚动元素,用于保存我的表格.

我目前有两个我考虑过的解决方案:

1. 添加一个侦听器以检查滚动条何时到达右侧(如此示例),然后隐藏或淡出渐变.这个问题是我在页面上有多个这些褪色的表格,我不确定设置这些聆听者的最有效方法是什么.我正在使用Vue.js,所以我不确定这是否/应该是一个指令,或者只是在页面上为每个表设置一个监听器.
2. 在表格的右侧添加一些空白区域,这样您可以滚动一点点超过实际表格的末尾,渐变只会混合到背景中.我已经尝试为表和.scrollable元素添加填充和边距,但它不会在表后添加任何额外的空间.

如果有人对他们认为我应该做的事情提出建议,我们将不胜感激.

所以,我在div中得到了一些数据.它按日期分成几块.它使用jQuery和mousewheel插件水平滚动.

当div达到它的终点(最左边,最右边)时,我需要发射一个事件.我认为通过检测鼠标滚动插件中获取的数据,可以通过当前实现的方式来计算何时无法进一步滚动.我只需要朝着正确的方向轻推.这是为我进行水平滚动的代码:

$(document).ready(function () {        
    $('#timeline').mousedown(function (event) {
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });
});

有人可以给我指点吗？谢谢!