北京大学两学一做网站,公司网络平台搭建,dw免费网站模板下载,网站源码怎么上传需求#xff1a;实现内容超出之后使用属性滚轮进行左右查看超出内容#xff0c;并且隐藏滚动条 1.不使用框架实现
每次滚动就滚动40px的距离
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta name实现内容超出之后使用属性滚轮进行左右查看超出内容并且隐藏滚动条 1.不使用框架实现
每次滚动就滚动40px的距离
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /style.container {width: 300px;overflow-x: hidden;white-space: nowrap;border: 1px solid #ccc;}.content {display: inline-block;}/style/headbodydiv classcontainer onwheelscrollHorizontally(event)div classcontentContent 1/divdiv classcontentContent 2/divdiv classcontentContent 3/divdiv classcontentContent 4/divdiv classcontentContent 5/divdiv classcontentContent 6/div/divscriptfunction scrollHorizontally(e) {e window.event || e;var delta Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));document.querySelector(.container).scrollLeft - delta * 40; // 每次滚动移动的距离e.preventDefault();}/script/body
/html效果 2.vue2使用自定义指令实现
templatediv styleheight: 400pxdiv classcontainer v-horizontal-scrolldiv classboxContent 1/divdiv classboxContent 2/divdiv classboxContent 3/divdiv classboxContent 4/divdiv classboxContent 5/divdiv classboxContent 6/divdiv classboxContent 1/divdiv classboxContent 2/divdiv classboxContent 3/divdiv classboxContent 4/divdiv classboxContent 5/divdiv classboxContent 6/div/div/div
/templatescript
export default {data() {return {};},directives: {horizontal-scroll: {bind: function (el) {el.addEventListener(wheel, function (event) {event.preventDefault();el.scrollLeft event.deltaY;});}}},mounted() {},methods: {}
};
/scriptstyle langscss scoped
.container {width: 300px;overflow-x: hidden;white-space: nowrap;border: 1px solid #ccc;display: flex;overflow-x: scroll;overflow-y: hidden;white-space: nowrap;margin: 50px;
}
.container::-webkit-scrollbar {display: none;
}
.box {// display: inline-block;
}
/style效果 文章到此结束希望对你有所帮助~~
