仅在全屏模式下显示页面滚动

Question

我有以下JS用于在点击链接后全屏显示页面：

<li class="dropdown yamm-fw">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">{{ $category->nom }} <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="yamm-content">
                    <div class="row">
                        <div class="col-sm-3">
                            <h5>test</h5>
                            <ul>     
                                <?php $count=0 ?>
                                @foreach ($types->whereIn('id', $category->produit->unique('type_id')->pluck('type_id')) as $type)
                                    @if ($count <= 6)
                                        <li><a href="#">{{$type->nom}}</a></li>
                                        <?php $count++ ?>
                                    @endif
                                @endforeach 
                            </ul>
                        </div>
                        <div class="col-sm-3">
                            <h5>teste 2</h5>
                            <ul>
                                <li><a href="category.html">Trainers</a></li>
                                <li><a href="category.html">Sandals</a></li>
                                <li><a href="category.html">Hiking shoes</a></li>
                                <li><a href="category.html">Casual</a></li>
                            </ul>
                        </div>

＆＃13;

＆＃13;

<a href="javascript:void(0)" onclick="javascript:toggleFullScreen()"></a>

＆＃13;

＆＃13;

＆＃13;

有没有办法让页面滚动（溢出）仅在全屏模式下可见，当用户通过再次点击相同的链接或通过其他方式取消全屏时，溢出会被隐藏？

Answer 1

您可以使用一个类来表示“无溢出”，反之亦然。然后将其添加到您的函数中，如下所示：

if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        document.body.className = document.body.className.replace(' no-scroll', '');
        ...
} else {
    document.body.className += " no-scroll";

使用以下方法查看https://www.linkedin.com/search/results/index/?keywords=firstname%3A"carden"%20AND%20lastname%3A"wyckoff"%20AND%20company%3A"salesforce"&origin=GLOBAL_SEARCH_HEADER以“切换”类以将滚动“打开/关闭”

// add/remove no scroll class to body
function toggleNoScroll(off) {
    //  test if already exist:
    var a = Array.prototype.indexOf.call(document.body.classList, 'no-scroll') + 1;
    //  remove if does exist, so as not to double up
    document.body.className = document.body.className.replace(' no-scroll', '');
    //  add only if off IS False OR off is empty & it did not previously exist (thus "toggle")
    if (off === false || (off !== true && !a)) document.body.className += " no-scroll";
    return document.body.classList;
}

那么我有：

if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
    toggleNoScroll(true);
...
else {
    toggleNoScroll(false);

Answer 2

您可以在运行document.body.className += ' ' + 'fullScreened'函数时向body元素添加一个类：

.fullScreened { overflow:hidden; }

然后添加如下的css规则：

Byte[] sample = new Byte[16] { 55 ,0 ,0 ,255, 12 ,255,75 ,255, 255,150,19 ,255, 42 ,255,78 ,255 };

让我知道它是否有效：）