在移动设备上滚动时的不良行为（根据视口大小添加/删除类）

Question

我的代码根据视口大小添加或删除类。 在桌面版本上，一切正常。 即使调整浏览器窗口的大小，一切也可以正常工作。 但是，我在移动设备（例如iPhone-Safari）上遇到以下问题：

如果我打开readmoresection，则当我向上或向下滚动页面时（有时仅在几秒钟后），它将再次关闭。 这种行为可能是什么？为什么它在台式机版本上起作用，但在移动设备上不起作用？

这是我的代码：

HTML模板：

<div class="description" >
    <h2 class="sectionheading">Information for <?= $entry->field('title')->value() ?></h2>
    <div class="readmore readmoresection" itemprop="description"><?= $entry->field('description')->value() ?></div>
</div>

jQuery的：

function onResizeReadMoreLayout(){
    if ($(window).width() <= 900) {
                $('.readmoresection span.handler').show();
                $('.readmoresection').addClass('reduced');
                if($('.readmoresection').hasClass('reduced')){
                    $('.readmoresection span.handler').html(' » Weiterlesen');
                }else{
                    $('.readmoresection span.handler').html(' » Schließen');
                    $('.readmoresection').removeClass('reduced');
                }
            }
            else{
                $('.readmoresection span.handler').hide();
                $('.readmoresection').removeClass('reduced');
        }  
}

// initial state
 onResizeReadMoreLayout();
 // on resize
 $(window).on('resize', onResizeReadMoreLayout);

这是有效的实时版本： CLICK 。 在标题“ INFORMATIONEN ZUM FERNSTUDIUM FITNESS C-LIZENZ”之后查看更多功能

Answer 1

在iOS上向上滚动时， readmore部分将关闭，因为地址栏会更改高度和/或显示底部操作栏，从而导致窗口大小调整。 但是，这里提出了另一个完全基于CSS的建议解决方案，因此，不仅可以避免问题，而且可以避免Javascript造成不必要的膨胀。

这是建议的解决方案。 我试图在您的代码中使用类似的类，以使其更有意义。

另外，作为一个旁注，出于性能原因，请尽可能尝试将Javascript侦听器减至最少，尤其是诸如resize或scroll 。

最后但并非最不重要的一点，取决于浏览器和浏览器的滚动条类型， $(window).width()容易产生不同的结果900px vs 900px + scrollbar width 。

HTML：

<div class="readmoresection">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum. Gravida neque convallis a cras semper auctor neque vitae. Magna sit
    amet purus gravida quis blandit. Dignissim cras tincidunt lobortis feugiat vivamus at. Leo a diam sollicitudin tempor. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Nisl purus in mollis nunc sed id. Auctor elit sed vulputate mi sit
    amet. Quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Eget felis eget nunc lobortis mattis aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Faucibus ornare suspendisse
    sed nisi lacus. Amet mauris commodo quis imperdiet massa tincidunt nunc. Dolor sit amet consectetur adipiscing elit. Fames ac turpis egestas sed tempus. Egestas tellus rutrum tellus pellentesque.
  </p>
  <p class="content-hidden">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum. Gravida neque convallis a cras semper auctor neque vitae. Magna sit
    amet purus gravida quis blandit. Dignissim cras tincidunt lobortis feugiat vivamus at. Leo a diam sollicitudin tempor. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Nisl purus in mollis nunc sed id. Auctor elit sed vulputate mi sit
    amet. Quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Eget felis eget nunc lobortis mattis aliquam. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Faucibus ornare suspendisse
    sed nisi lacus. Amet mauris commodo quis imperdiet massa tincidunt nunc. Dolor sit amet consectetur adipiscing elit. Fames ac turpis egestas sed tempus. Egestas tellus rutrum tellus pellentesque.
  </p>
  <span class="handler"><span class="handler-opened">Toggle close</span><span class="handler-hidden">Toggle open</span></span>
</div>

CSS：

@media (max-width:900px) {
  .content-hidden {
    display: none;
  }
  .handler-opened {
    display: none;
  }
  .opened .handler-opened {
    display: block;
  }
  .opened .handler-hidden {
    display: none;
  }
  .opened .content-hidden {
    display: block;
  }
}

@media (min-width:901px) {
  .content-hidden {
    display: block !important;
  }
  .handler {
    display: none;
  }
}

Javasript：

$('.readmoresection').on('click', 'span.handler', function() {
  $(this).closest('.readmoresection').toggleClass('opened');
});

这是一个有效的小提琴： https : //jsfiddle.net/scooterlord/dLjygyrj/