Я не могу понять, почему elem.scrollTop всегда 0 для меня. Попробуйте использовать разные ответы на одни и те же вопросы на этом форуме, но они не работают для меня. Я попытался оценить свойство scrollTop двумя способами, но оно все равно не сработало. Чтобы отредактировать себя, я добавил два console.log () propety, и первое из них даже не работает, а другое всегда = 0
Есть мои HTML и CSS
#heatMap {
/* !*background-image: url(HinckleyTown.jpg);*!*/
height: 2000px;
width: 2000px;
}
html, body {
height: 1000px;
width: 1000px;
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="build/heatmap.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script async src="webgazer.js"></script>
</head>
<body>
<div id='heatMap' onscroll="myFunction()"></div>
<script>
// create configuration object
var xprediction = 0;
var yprediction = 0;
function myFunction() {
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
console.log(y);
}
window.onload = function() {
//start the webgazer tracker
webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) {
return;
}
let elem = document.getElementById('heatMap');
console.log(elem.scrollTop);
xprediction = data.x; //these x coordinates are relative to the viewport
//console.log(xprediction)
yprediction = data.y + elem.scrollTop; //these y coordinates are relative to the viewport
//console.log(elapsedTime); //elapsed time is based on time since begin was called
var dataPoint = {
x: xprediction, // x coordinate of the datapoint, a number
y: yprediction, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
//console.log(dataPoint);
heatmapInstance.addData(dataPoint);
heatmapInstance.setDataMin(10);
heatmapInstance.setDataMax(100);
// heatmapInstance.repaint();
}).begin()
.showPredictionPoints(true);
//Set up the webgazer video feedback.
var setup = function () {
//Set up the main canvas. The main canvas is used to calibrate the webgazer.
var canvas = document.getElementById("plotting_canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'fixed';
};
function checkIfReady() {
if (webgazer.isReady()) {
setup();
} else {
setTimeout(checkIfReady, 100);
}
}
setTimeout(checkIfReady, 100);
var config = {
container: document.getElementById('heatmapContainer'),
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75
};
// create heatmap with configuration
var heatmapInstance = h337.create({
container: document.getElementById('heatMap')
});
// var dataPoint = {
// x: xprediction, // x coordinate of the datapoint, a number
// y: yprediction, // y coordinate of the datapoint, a number
// value: 100 // the value at datapoint(x, y)
// };
// heatmapInstance.addData(dataPoint);
// var data = {
// max: 100,
// min: 0,
// data: [
// dataPoint, dataPoint, dataPoint, dataPoint
// ]
// };
// heatmapInstance.setData(data);
heatmapInstance.setDataMin(0);
heatmapInstance.repaint();
}
</script>
</body>
</html>