英文:
Unexpected page scroll when element loads
问题
I am loading an embeddable element, but when the page loads it jumps/scrolls to the element. I've tried adding in a function that would scroll to the top of the page using jQuery, but to no avail.
I've noticed this behavior on Chrome and Edge, however, it does not occur on FireFox. Any clues?
I expected the page to not scroll to the element. I added the jQuery function and still experience the same behavior.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const elementConfig = {
language: 'en-US',
trip: {
originAirport: "RIX",
destinationAirport: "TLL"
},
placement: '',
features: {
showFilters: true,
showMapLegend: true,
}
}
function onSherpaEvent(event) {
// Ensure that the sdk is loaded before creating the element:
if (event.type === 'sdkLoaded') {
$sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
}
}
$(document).ready(function() {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
<!-- language: lang-html -->
<script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId=sxM5NjIzNz" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="what">What</div> <br> some <br> content <br> that <br> is <br> just <br> meant <br> to <br> be <br> a <br> placeholder <br> in order <br> to see <br> if <br> this <br> scroll <br> issue <br> happens <br> here
<div id="sherpa-trip-element">sherpa-trip-element</div>
<!-- end snippet -->
英文:
I am loading an embeddable element, but when the page loads it jumps/scrolls to the element. I've tried adding in a function that would scroll to the top of the page using jQuery, but to no avail.
I've noticed this behaviour on Chrome and Edge, however, it does not occur on FireFox. Any clues?
I expected the page to not scroll to the element. I added the jQuery function and still experience the same behaviour.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const elementConfig = {
language: 'en-US',
trip: {
originAirport: "RIX",
destinationAirport: "TLL"
},
placement: '',
features: {
showFilters: true,
showMapLegend: true,
}
}
function onSherpaEvent(event) {
// Ensure that the sdk is loaded before creating the element:
if (event.type === 'sdkLoaded') {
$sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
}
}
$(document).ready(function() {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
<!-- language: lang-html -->
<script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId=sxM5NjIzNz" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="what">What</div> <br> some <br> content <br> that <br> is <br> just <br> meant <br> to <br> be <br> a <br> placeholder <br> in order <br> to see <br> if <br> this <br> scroll <br> issue <br> happens <br> here
<div id="sherpa-trip-element">sherpa-trip-element</div>
<!-- end snippet -->
答案1
得分: 0
你需要询问Sherpa。小部件中有数百个滚动调用。在挂载时没有回调，当Sherpa聚焦时文档已经准备就绪。最好的方法是将小部件移到你可以控制的iFrame中。
英文:
You need to ask Sherpa. There are hundreds of scroll calls in the widget. There is no callback on mount and the document.ready is already triggered when the sherpa focuses.
The best bet is to move the widget into an iFrame you control
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论