滚动时如何让Qualtrics中的整个项目保持原位? [英] How to have entire item in Qualtrics remain in position when scrolling?
问题描述
我正在展示嵌入在描述性文本项中的图像，然后是关于该图像的几个问题.我希望该项目在参与者滚动时保持原位.
我已经能够使用类似这样的 HTML 代码使整个图像保持原位:
<风格>.image{位置:固定；背景:白色；}</风格><div类=图像"><img src="图片文件位置" style="width: 395px; height: 395px;"/></html>
但是这会在一个非常尴尬的地方冻结图像本身(它实际上是在编辑器本身中完成的，这阻止了我做任何其他事情).有没有办法让项目的呈现方式与正常情况完全相同，但只是保持原位?
它应该是这样显示的，作为一个独立于后续问题的项目.然后我希望它保持原地不动，而用户可以滚动浏览问题.
这显示了它当前的显示方式.图像被冻结在原地，但不是它应该出现的地方(即，在上面并与后面的问题分开.
<小时>您可以使用一个间隔元素来对齐其他元素的起始高度.例如:
<img src="图像文件的位置" width="395px" height="395px"/><div class = "image_spacer">这是一个间隔元素
<风格>.图像{位置:固定；背景:白色；z-索引:1000；}.image_spacer{高度:395px；可见性:隐藏；}</风格>
从视觉上讲，我建议您也为图像 div 添加 100% 的宽度，以便在滚动时完全覆盖其他元素.
要固定在滚动顶部，请执行以下操作:
<img src="图像位置在这里" width="395px" height="395px"/><div class = "image_spacer">这是一个间隔元素
<风格>.图像{背景:白色；宽度:100%；z-索引:1000；文本对齐:居中；}.image.fixed{位置:固定；顶部:0;左:0;}.image_spacer{高度:395px；可见性:隐藏；显示:无；}.image_spacer.fixed{显示:块；}</风格>
另外，将这个添加到问题的 JavaScript 中:
Qualtrics.SurveyEngine.addOnload(function(){var space = $$('.image')[0].cumulativeOffset().top;控制台日志(空间)；window.addEventListener("滚动", function(){if( document.body.scrollTop > space){$$('.image')[0].addClassName('fixed');$$('.image_spacer')[0].addClassName('fixed');}别的{$$('.image')[0].removeClassName('fixed');$$('.image_spacer')[0].removeClassName('fixed');}});});I am presenting an image embedded in a descriptive text item, followed by several questions about that image. I would like that item to remain in place while the participant scrolls.
I've been able to get the entire image to remain in place using something like this HTML code:
<html>
<style>
.image{position: fixed; background: white;}
</style>
<div class = "image">
<img src="LOCATION OF IMAGE FILE" style="width: 395px; height: 395px;" />
</div>
</html>
But this freezes the image itself in a very awkward place (it actually does this in the editor itself, which blocks me from doing anything else). Is there a way to keep the presentation of the item exactly the same as it is normally, but just keep it in place?
You can use a spacer element to align the starting height of other elements. For example:
<div class = "image">
<img src="LOCATION OF IMAGE FILE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
position: fixed;
background: white;
z-index: 1000;
}
.image_spacer{
height: 395px;
visibility: hidden;
}
</style>
Visually speaking, I may recommend adding a width of 100% to your image div as well, so that other elements are fully covered when you scroll.
To fix at the top on scroll, do the following:
<div class = "image">
<img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
background: white;
width:100%;
z-index: 1000;
text-align:center;
}
.image.fixed{
position: fixed;
top:0;
left:0;
}
.image_spacer{
height: 395px;
visibility: hidden;
display:none;
}
.image_spacer.fixed{
display:block;
}
</style>
In addition, add this to the JavaScript for the question:
Qualtrics.SurveyEngine.addOnload(function()
{
var space = $$('.image')[0].cumulativeOffset().top;
console.log(space);
window.addEventListener("scroll", function(){
if( document.body.scrollTop > space){
$$('.image')[0].addClassName('fixed');
$$('.image_spacer')[0].addClassName('fixed');
}
else{
$$('.image')[0].removeClassName('fixed');
$$('.image_spacer')[0].removeClassName('fixed');
}
});
});
这篇关于滚动时如何让Qualtrics中的整个项目保持原位?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
