Question

我正在调整手机和平板电脑的滚动顶部。但我注意到，当我有这个桌面代码时：

$(document).ready(function(){
    "use strict";
    $('#menu ul li #page3').on('click', function(){
        $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.99}, 850);
    }); 
});

当我使用时：

var mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) ");
if (mql.matches){ // ALL PHONES

$(document).ready(function(){
    "use strict";
    $('#menu ul li #page3').on('click', function(){
        $('html,body').animate({scrollTop: $(".footer").offset().top  * 0.99}, 850);
    }); 
}); 

}

当我使用另一个值进行偏移时，它不会直接转到＃page3，它首先从桌面，STOPS转到旧的#page 3设置，然后慢慢转到媒体查询中设置的＃page3

为什么这不仅仅是用css媒体查询取代代码？

另一个问题是javascript中的媒体查询确实有效，但是当我将我的屏幕从横向旋转到纵向或者相反时它仍然以纵向模式和其他方式使用横向代码。有人知道如何解决这个问题吗？

最后一件事是当我瞄准我的ipad时没有任何变化：

var mql = window.matchMedia("only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation : landscape) ");
if (mql.matches){ //TABLET LANDSCAPE

}

感谢帮助和解释

修改

我正在使用它：

var mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) ");
if (mql.matches){ // ALL PHONES PORTRAIT

但是也想在其中使用

var mql = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : landscape) ");
    if (mql.matches){ // ALL PHONES LANDSCAPE

如何将这些2合并为一个代码用于IF，并让桌面具有ELSE。

桌面有效，并且它也适用于1 IF，但不适用于这两种情况。

你能否在我的代码中结合窗口调整大小代码，让我完全理解它是如何工作的，因为我知道0,0这个。我只知道如何在javascript下面使用多个媒体查询，这就是它。

我非常感谢您的时间和精力。

Answer 1

首先这是一个可怕的选择器，拥有一个id真的没有意义，然后是另一个这样的id。 $('#menu ul li #page3')我假设你想根据点击某些LI（或其中的链接，但为了简单起见，我们将使用li）来做某事。请注意，您没有提供HTML，但我怀疑您有重复的ID，即id="page3"这是无效的HTML，请不要这样做。

接下来，我们需要使用媒体查询为每个设置一个布尔值组。现在我们知道了这些，我们可以使用条件（if）来做某事。在这里，我们将设置一个大小值并使用它。

现在我们已经解决了这个问题，我们可以编写一个函数来根据这些函数返回一个值。我们将在单击事件处理程序中调用该函数。我不确定你的愿望，因为它在你的问题中不是很清楚，所以我会把它放在一起，你可以稍后根据你的具体需要改变它。

function sniffTheMedia() {
  let isIpad = window.matchMedia("only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation : landscape) ");
  let isLandscape = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : landscape) ");
  let isPortrait = window.matchMedia("only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation : portrait) ");
  // I picked totally random numbers, adjust to suit
  let size = isIpad ? 800 : isLandscape ? 400 : isPortrait ? 300 : 500;
  return size;
}
// add event handler
$(function() {
  "use strict";
  $('#menu').on('click', 'li', function() {
    let sniffed = sniffTheMedia();
    //console.log(sniffed);
    let target = "#" + $(this).data("target");
    $('html, body').animate({
      scrollTop: $(target).offset().top * 0.99
    }, sniffed);
  });
});

.somediv {
  height: 6em;
  border: solid cyan 1px;
}

.footer {
  height: 5em;
}

.men-item {
  border: solid lime 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
  <ul class="menu-group">
    <li class="menu-item" data-target="page1">Howdy 1</li>
    <li class="menu-item" data-target="page2">Friend 2</li>
    <li class="menu-item" data-target="page3">Friend 3</li>
    <li class="menu-item" data-target="myfooter">footer</li>
  </ul>
</div>
<div id="page1" class="somediv">I am a div content 1</div>
<div id="page2" class="somediv">I am a div content 2</div>
<div id="page3" class="somediv">I am a div content Page 3</div>
<div id="myfooter" class="footer"><span>Footer Content</span> I am in the footer
</div>

在媒体查询javascript中使用scrolltop

1 个答案: