我有一个简单的点击功能,当点击一个按钮时,用户无法滚动.一切正常.该按钮用作切换,并且在切换的"其他"部分,即当用户再次单击时,我想删除阻止用户使用该removeEventListener();方法滚动的事件监听器.我在这个方法中调用的函数虽然不起作用？
我似乎无法弄清楚问题是什么？
codepen:https://codepen.io/emilychews/pen/MrBvzP
JS
var button = document.getElementById("button");
// function to be called and removed when button is clicked
function noscroll() {
window.scrollTo(0, 0);
}
// TOGGLE EVENT LISTENER
var scrollToggle = false;
function toggleEventListener() {
if (scrollToggle === false) {
window.addEventListener("scroll", function(){
noscroll();
}, false);
scrollToggle = true;
} else {
window.removeEventListener("scroll", function(){
noscroll();
}, false);
scrollToggle = false;
}
}
button.addEventListener("click", function() {
toggleEventListener();
}, false)body {margin: 0; padding: 0; height: 150vh;}
#button …我有一些文字我希望环绕图像 - 我知道我需要将图像浮动到左边以强制文本环绕它.无论我做什么似乎都没有用？
我在这里设置了一个codepen:https://codepen.io/emilychews/pen/GmdZOb
代码如下以供快速参考.
* {
padding: 0;
margin: 0;
}
.outer {
width: 50%;
height: 50vh;
background: blue;
}
.inner {
display: block;
width: 25%;
height: 25vh;
background: red;
float: left;
margin-right: 10px;
}
p {
color: white;
}<div class="outer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo …我有一个 CSS 网格布局，其中我有一些跨越多个网格轨道的网格项目。
当窗口低于 1024px 时，我想更改布局。
在这个例子中，.grid-item-5目前跨越 3 个轨道，我希望它低于 1024px，这个视觉元素从 '.grid-item-4 开始并跨越整行 - 这很简单，因为我会做以下事情：
@media screen
and (max-width: 1024px) {
.grid-item-4 {
grid-column: 1 / 8;
background: lightblue;
}
}
问题：
我.grid-item-5到底如何关闭初始值，以便它们恢复为默认值（即，项目 5 不跨越任何其他网格列），从而不会破坏布局？
非常感谢，
@media screen
and (max-width: 1024px) {
.grid-item-4 {
grid-column: 1 / 8;
background: lightblue;
}
}
body {
margin: 0; padding: 0;
width: 100%;
}
#grid-wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 10rem);
grid-gap: 1px;
}
.grid-item {
background: …我已经开始学习Gulp和Webpack，教程中没有涉及的一件事是……当您的项目完成并准备好进行部署时，您将如何处理所有开发依赖项？
node_modules文件夹本身很大，我假设您没有将此文件夹上传到您的Web服务器（或者您可以）吗？但这是否意味着使用SASS / minification之类的东西所获得的所有收益仅在您的本地主机项目中可用，因此只有已部署的最终文件（这意味着必须在站点上编辑缩略代码等）如果您需要进行一些小的更改）。
学习过程的这一部分比我到目前为止在Web开发中所经历的任何其他事情都难找到。我还认为这很差，主要的学习库（Lynda，Treehouse等）都没有在本教程的结尾进行介绍。就像，祝贺您现在已经建立了一个可以上传的网站。好的，但是我该如何处理所有依赖项中的数百个文件等？我是否可以将它们作为网站的一部分正常上载？如果不这样做，我该如何防止这种情况发生，或者npm是否可以自动阻止这种情况发生？
任何指导/解释都将是惊人的。
艾米莉
我有一个div，当它滚动到视口时，我想更改颜色，而我正在尝试使用新的junctionObserver方法实现这一点。我已经在config回调中设置了参数，但是似乎无法让观察者自己添加类来更改背景颜色？
任何帮助都将是惊人的。
codepen：https：//codepen.io/emilychews/pen/mXVBVK
const config = {
root: null, // sets the framing element to the viewport
rootMargin: '0px',
threshold: 0.5
};
const box = document.getElementById('box');
let observer = new IntersectionObserver(function(entries) {
observer.observe(box);
entries.forEach(function(item){
item.classList.add("active");
});
}, config);body {
margin: 0; padding: 0;
display:flex;
justify-content: center;
align-items: center;
height: 300vh;
}
#box {
width: 100px;
height: 100px;
background: blue;}
.active {background: red;}<div id="box"></div>html javascript scroll javascript-events intersection-observer