Почему window.scrollTo () не вызывается? - PullRequest
Новая
       6

Почему window.scrollTo () не вызывается?

1 голос
/ 11 июня 2019

Я использую плагин Bootstrap's Buttons Переключить состояние в пользовательском флажке. Когда эта кнопка переключена (включена), скрытый элемент должен появиться в верхней части страницы, а затем страница должна прокрутиться до верхней части. При следующем переключении кнопки (выкл.) Элемент должен исчезнуть, а страница прокрутиться до самого верха.

Скрытый элемент переключается, когда кнопка включается и выключается, но прокрутка не работает.

Изменение переключателя данных с «кнопок» на «кнопку» приводит к тому, что прокрутка работает, но визуально не переключает кнопку, так что это бесполезно.

Я попытался установить событие onchange для самого флажка, но он также не прокручивается.

Кажется, что функция Bootstrap для события onclick делает что-то, что не позволяет моей функции onclick работать должным образом. До сих пор я не пытался понять это (я буду продолжать пытаться).

Установка таймаута для функции window.scrollTo () заставляет его работать. Почему это может быть? Есть ли способ сделать это без таймаута? 

<body>
    <div class="container">
        <div>
            <h3>Toggle Header and Scroll To Top</h3><hr />
            <h1 id="displayMe" class="d-none">Display Me</h1>
            <div style="height: 100vh;"></div>
            <div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
                <input type="checkbox" class="custom-control-input" id="myCheckbox">
                <label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
            </div>
        </div>
    </div>
    <script src="assets/jquery/jquery.min.js"></script>
    <script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#myButton").on("click", toggleAndScroll);
        });

        function toggleAndScroll() {
            $('#displayMe').toggleClass('d-none');

            //setTimeout(function () {
                window.scrollTo(0, 0);
            //}, 100);
        }
    </script>
</body>

https://jsfiddle.net/ews9q50v/

(Раскомментируйте строки setTimeout, чтобы увидеть, как он работает)

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Это похоже на работу с Chrome, но у Firefox есть другие проблемы: 

function toggleAndScroll() {
  $('#displayMe').toggleClass('d-none');

  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}

Но так как вы используете jQuery, что-то подобное работает как в Firefox, так и в chrome: 

function toggleAndScroll() {
  $('#displayMe').toggleClass('d-none');
  $("html, body").animate({ scrollTop: 0 }, "slow");
}

Я не совсем уверен, в чем проблема - возможно, это связано с изменением высоты прокрутки при вызове scrollTo.

0 голосов
/ 11 июня 2019

Понятия не имею, почему это не работает. Bootstrap что-то испортил. Но вы можете легко обойти это, переместив scrollTo в конец цикла событий, используя setTimeout(func, 0). 

$("#myButton").on("click", toggleAndScroll);

function toggleAndScroll() {
    $('#displayMe').toggleClass('d-none');

    setTimeout(function () {
        window.scrollTo(0, 0);
    }, 0);
}

демо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...