web-dev-qa-db-ja.com

要素が表示されていない場合はスクロールします

jqueryを使用して、要素が現在のページビューに表示されるかどうかを判断する方法。コメント機能を追加したいと思います。コメント機能は、Facebookのように機能し、現在表示されていない場合にのみ要素までスクロールします。表示されているということは、現在のページビューにはないということですが、要素までスクロールできます。

javascriptjqueryscrollviewportvisible
21
macpak

ライブデモ

基本的には、要素の位置をチェックして、それがウィンドウのビューポート内にあるかどうかを確認します。

function checkIfInView(element){
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view so scroll to it
        $('html,body').animate({scrollTop: offset}, 1000);
        return false;
    }
   return true;
}
38
Loktar

Loktarの回答を改善し、以下を修正します。

  1. スクロールアップする

  2. Display：none要素（非表示のdivなど）までスクロールします。

    function scrollToView(element){
    var offset = element.offset().top;
    if(!element.is(":visible")) {
        element.css({"visibility":"hidden"}).show();
        var offset = element.offset().top;
        element.css({"visibility":"", "display":""});
    }

    var visible_area_start = $(window).scrollTop();
    var visible_area_end = visible_area_start + window.innerHeight;

    if(offset < visible_area_start || offset > visible_area_end){
         // Not in view so scroll to it
         $('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
         return false;
    }
    return true;
}
12
digitalPBK

これらすべてのソリューションおよびその他の多くのソリューションを試した後、IE11内で（一部の互換モードで）古いWebポータルソフトウェア（10年前）を実行するという私の要件を満たしたものはありませんでした。それらはすべて、要素が表示されているかどうかを正しく判断できませんでした。しかし、私はこれを見つけました solution 。お役に立てば幸いです。

function scrollIntoViewIfOutOfView(el) {
    var topOfPage = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var heightOfPage = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var elY = 0;
    var elH = 0;
    if (document.layers) { // NS4
        elY = el.y;
        elH = el.height;
    }
    else {
        for(var p=el; p&&p.tagName!='BODY'; p=p.offsetParent){
            elY += p.offsetTop;
        }
        elH = el.offsetHeight;
    }
    if ((topOfPage + heightOfPage) < (elY + elH)) {
        el.scrollIntoView(false);
    }
    else if (elY < topOfPage) {
        el.scrollIntoView(true);
    }
}
6
user1806949

私は、divまたは他のコンテナー（本体を含む）に含まれている要素を最小限にスクロールするdigitalPBKの回答の少し一般的なバージョンを作成しました。要素が何らかの形で親内に含まれている限り、DOM要素またはセレクターを関数に渡すことができます。

function scrollToView(element, parent) {
    element = $(element);
    parent = $(parent);

    var offset = element.offset().top + parent.scrollTop();

    var height = element.innerHeight();
    var offset_end = offset + height;
    if (!element.is(":visible")) {
        element.css({"visibility":"hidden"}).show();
        var offset = element.offset().top;
        element.css({"visibility":"", "display":""});
    }

    var visible_area_start = parent.scrollTop();
    var visible_area_end = visible_area_start + parent.innerHeight();

    if (offset-height < visible_area_start) {
        parent.animate({scrollTop: offset-height}, 600);
        return false;
    } else if (offset_end > visible_area_end) {
        parent.animate({scrollTop: parent.scrollTop()+ offset_end - visible_area_end }, 600);
        return false;

    }
    return true;
}
5
jaggedcow

JQueryクックブックにある彼のすばらしいリンクをご覧ください。

要素がビューポート内にあるかどうかの判断

要素がビューポートに含まれているかどうかをテストします

jQuery(document).ready(function() {
    var viewportWidth = jQuery(window).width(),
        viewportHeight = jQuery(window).height(),
        documentScrollTop = jQuery(document).scrollTop(),
        documentScrollLeft = jQuery(document).scrollLeft(),

        $myElement = jQuery('#myElement'),

        elementOffset = $myElement.offset(),
        elementHeight = $myElement.height(),
        elementWidth = $myElement.width(),

        minTop = documentScrollTop,
        maxTop = documentScrollTop + viewportHeight,
        minLeft = documentScrollLeft,
        maxLeft = documentScrollLeft + viewportWidth;

    if (
        (elementOffset.top > minTop && elementOffset.top + elementHeight < maxTop) &&
        (elementOffset.left > minLeft && elementOffset.left + elementWidth < maxLeft)
    ) {
        alert('entire element is visible');
    } else {
        alert('entire element is not visible');
    }
});

要素がどれだけ表示されるかをテストします

jQuery(document).ready(function() {

var viewportWidth = jQuery(window).width(),
    viewportHeight = jQuery(window).height(),

    documentScrollTop = jQuery(document).scrollTop(),
    documentScrollLeft = jQuery(document).scrollLeft(),

    $myElement = jQuery('#myElement'),

    verticalVisible, horizontalVisible,

    elementOffset = $myElement.offset(),
    elementHeight = $myElement.height(),
    elementWidth = $myElement.width(),

    minTop = documentScrollTop,
    maxTop = documentScrollTop + viewportHeight,
    minLeft = documentScrollLeft,
    maxLeft = documentScrollLeft + viewportWidth;

function scrollToPosition(position) {
    jQuery('html,body').animate({
        scrollTop : position.top,
        scrollLeft : position.left
    }, 300);
}

if (
    ((elementOffset.top > minTop && elementOffset.top < maxTop) ||
    (elementOffset.top + elementHeight > minTop && elementOffset.top + 
elementHeight < maxTop))
&&  ((elementOffset.left > minLeft && elementOffset.left < maxLeft) ||
    (elementOffset.left + elementWidth > minLeft && elementOffset.left +
elementWidth < maxLeft)))
{
    alert('some portion of the element is visible');

    if (elementOffset.top >= minTop && elementOffset.top + elementHeight 
<= maxTop) {
        verticalVisible = elementHeight;
    } else if (elementOffset.top < minTop) {
        verticalVisible = elementHeight - (minTop - elementOffset.top);
    } else {
        verticalVisible = maxTop - elementOffset.top;
    }

    if (elementOffset.left >= minLeft && elementOffset.left + elementWidth 
<= maxLeft) {
        horizontalVisible = elementWidth;
    } else if (elementOffset.left < minLeft) {
        horizontalVisible = elementWidth - (minLeft - elementOffset.left);
    } else {
        horizontalVisible = maxLeft - elementOffset.left;
    }

    var percentVerticalVisible = (verticalVisible / elementHeight) * 100;
    var percentHorizontalVisible = (horizontalVisible / elementWidth) * 100;

    if (percentVerticalVisible < 50 || percentHorizontalVisible < 50) {
        alert('less than 50% of element visible; scrolling');
        scrollToPosition(elementOffset);
    } else {
        alert('enough of the element is visible that there is no need to scroll');
    }

} else {
    // element is not visible; scroll to it
    alert('element is not visible; scrolling');
    scrollToPosition(elementOffset);
}
3
Leniel Maccaferri

次のコードは私が結果を達成するのに役立ちました

function scroll_to_element_if_not_inside_view(element){
  if($(window).scrollTop() > element.offset().top){
    $('html, body').animate( { scrollTop: element.offset().top }, {duration: 400 } );
  }
}
1
Ashok Gj

ウィンドウのスクロール位置に関係なく、要素全体（またはその一部のみ）がブラウザーのビジュアルビューポート内にあるかどうかをすばやく確認できる jQueryプラグイン があります。 GitHubリポジトリ からダウンロードする必要があります。

次のHTMLがあり、フッターが表示されたときにアラートを出すとします。

<section id="container">
    <aside id="sidebar">
        <p>
            Scroll up and down to alert the footer visibility by color:
        </p>
        <ul>
            <li><span class="blue">Blue</span> = footer <u>not visible</u>;</li>
            <li><span class="yellow">Yellow</span> = footer <u>visible</u>;</li>
        </ul>
        <span id="alert"></span>
    </aside>
    <section id="main_content"></section>
</section>
<footer id="page_footer"></footer>

したがって、bodyタグの終了前にプラグインを追加します。

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery_visible/examples/js/jq.visible.js"></script>

その後、次のような簡単な方法で使用できます。

<script type="text/javascript">
jQuery( document ).ready(function ( $ ) {
  if ($("footer#page_footer").visible(true, false, "both")) {
    $("#main_content").css({"background-color":"#ffeb3b"});
    $("span#alert").html("Footer visible");
  } else {
    $("#main_content").css({"background-color":"#4aafba"});
    $("span#alert").html("Footer not visible");
  }

  $(window).scroll(function() {
    if ($("footer#page_footer").visible(true, false, "both")) {
      $("#main_content").css({"background-color":"#ffeb3b"});
      $("span#alert").html("Footer visible");
    } else {
      $("#main_content").css({"background-color":"#4aafba"});
      $("span#alert").html("Footer not visible");
    }
  });
});
</script>

ここに デモ

0
Riccardo Volpe