LARAVEL 5.8：窗口滚动，滚动在刀片模板中不起作用答案

【问题标题】：LARAVEL 5.8 : Window onscroll, scroll not working in blade templateLARAVEL 5.8：窗口滚动，滚动在刀片模板中不起作用
【发布时间】：2019-08-24 13:38:16
【问题描述】：

我的 laravel 5.8 应用无法使用滚动功能，不知道为什么。

我的代码在app.blade.php

<script src="{{ asset('asset\js\jquery.min.js') }}"></script> // 3.3.1
.
.
<script>
   window.onscroll = function () {
    console.log('scroll')
   };
</script>
.
.
.
</body>

我尝试过的

 $(document).ready(function() {
     $(window).scroll(function() {
         console.log('scroll')
     }) 
 })

它仍然无法正常工作。我做错了什么？

【问题讨论】：

你的 jquery 加载正确吗？
如果你的 jquery 加载完美，它肯定会工作！！
ctrl + u 然后先检查 jquery 是否加载或警告 $document 中的某些内容准备好查看 jquery 是否正常工作

标签： javascript jquery laravel

【解决方案1】：

试试scrollIntoView

function scrollToC() { divC.scrollIntoView(); }

window.onscroll = function () { console.log('scroll') };

html { scroll-behavior: smooth; }
.block { height: 1000px; width: 300px; margin: 20px; background: yellow; )

<button onclick="scrollToC()">Scroll to C</button>
<div id="divA" class="block">a</div>
<div id="divB" class="block">b</div>
<div id="divC" class="block">c</div>

【讨论】：

滚动但不流畅，没有控制台日志。
@DonNoinongyao 打开 chrome 控制台查看日志（我关闭了 sn-p 控制台，因为它破坏了滚动 - 也在剪断的内部滚动效果不佳（它向下滚动 stackOvefrlow 窗口） - 但它很流畅这意味着它是动画（不是立即跳转）-但是滚动平滑度不是问题的一部分-将其视为奖金）
是的，我使用 chrome 开发工具查看 js 日志，当我单击按钮时，该功能工作但 'window.onscroll' 不起作用（控制台没有登录）。
@KamilKiełczewski 我相信 OP 只想要 onscroll 事件，所以我很困惑你为什么向他推荐 scrollIntoView。
@DonNoinongyao 这很奇怪——当我点击 sn-p 中的按钮时，在 chrome 开发控制台中我看到“滚动”（46 次）——这意味着 window.onscroll 事件处理程序被触发。当然这种方式我们使用简单的js（没有jquery）

【解决方案2】：

将此代码添加到您的 app.blade.php 中

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <script>
        $(document).ready(function(){

            $(window).scroll(function() {
                console.log('scrolled');
                console.log(window.pageYOffset);
            });

        });
    </script>
</head>

<body>
    <div id="app" style="height:1000px;">
        <!-- your contents  -->
    </div>
</body>

【讨论】：