Question

我有滚动的固定块，当我滚动到块的末尾时，按钮应该有一个阴影。我们需要在这里比较什么样的高度？

function scrollButtonShadow() {
        if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
            $('.button').css('box-shadow', '0px 0px 13px 0px rgba(0, 0, 0, 1)');
        } else {
            $('.button').css('box-shadow', 'none');
        }
    }

    $(window).on('scroll', scrollButtonShadow);

body {
  overflow: hidden;
}
.block {
  overflow: auto;
  width: 200px;
  height: 100%;
  background: #ececec;
  position: fixed;
}

.button {
  position: fixed;
  bottom: 0;
}

button {
  border: none;
  background: green;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nihil magni placeat ducimus optio cupiditate sequi deleniti dolorem minus suscipit exercitationem fuga doloribus ipsa libero itaque dicta, error esse, nulla laudantium magnam officia tempore asperiores? Autem exercitationem nihil saepe hic laboriosam quos rerum id quod beatae natus cumque, ducimus eligendi dolores voluptas labore delectus nisi quidem culpa. Ad aperiam laboriosam inventore nisi accusamus, cum, voluptate tenetur. Facilis ratione maiores quibusdam consequuntur velit illo sit explicabo voluptates minus perspiciatis voluptatem optio commodi quos sint eligendi, beatae ipsa, et nam cupiditate at ducimus, ad accusantium sed. Iure repellendus deserunt veniam fugiat amet, sed aliquam ducimus labore necessitatibus ipsum odit voluptatem dicta sit voluptatum tempore possimus a? Ullam recusandae praesentium qui dolor officiis magni et molestiae quidem dolores dolorum animi repellat, iste, dolorem similique! Voluptate labore ipsam delectus totam, dolorum adipisci dolores, corporis amet repellendus iure animi. Vero eveniet eius dolore tempora, soluta explicabo ut, qui esse commodi, fuga debitis. Facilis tempora dolorum commodi in nesciunt culpa placeat praesentium, quis dignissimos ea asperiores ut omnis adipisci vero dolore aliquid architecto est quo, necessitatibus. 
        <div class="button"><button>Click</button></div>
    </div>

Answer 1

在HTML中，您必须添加一个段落标记（即<p>）来计算滚动块的宽度：

<div class="block">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nihil magni placeat ducimus optio cupiditate sequi deleniti dolorem minus suscipit exercitationem fuga doloribus ipsa libero itaque dicta, error esse, nulla laudantium magnam officia tempore asperiores? Autem exercitationem nihil saepe hic laboriosam quos rerum id quod beatae natus cumque, ducimus eligendi dolores voluptas labore delectus nisi quidem culpa. Ad aperiam laboriosam inventore nisi accusamus, cum, voluptate tenetur. Facilis ratione maiores quibusdam consequuntur velit illo sit explicabo voluptates minus perspiciatis voluptatem optio commodi quos sint eligendi, beatae ipsa, et nam cupiditate at ducimus, ad accusantium sed. Iure repellendus deserunt veniam fugiat amet, sed aliquam ducimus labore necessitatibus ipsum odit voluptatem dicta sit voluptatum tempore possimus a? Ullam recusandae praesentium qui dolor officiis magni et molestiae quidem dolores dolorum animi repellat, iste, dolorem similique! Voluptate labore ipsam delectus totam, dolorum adipisci dolores, corporis amet repellendus iure animi. Vero eveniet eius dolore tempora, soluta explicabo ut, qui esse commodi, fuga debitis. Facilis tempora dolorum commodi in nesciunt culpa placeat praesentium, quis dignissimos ea asperiores ut omnis adipisci vero dolore aliquid architecto est quo, necessitatibus. 
        </p>
  <div class="button"><button>Click</button></div>
</div>

在剧本中：

function scrollButtonShadow(event) {
    var blockScrool = $(this).scrollTop();
    var blockHeight = $(this).find('p').height() + $(this).find('div').height();
    var windowHeight = $(window).innerHeight();
    var delta = blockHeight - windowHeight - blockScrool;
    if (delta < 0) {
        $('.button').css('box-shadow', '0px 0px 13px 0px rgba(0, 0, 0, 1)');
    } else {
        $('.button').css('box-shadow', 'none');
    }
}

在ifined块结束时的盒子阴影。滚动

1 个答案: